“T love this text 
because it provides 
detailed instructions 
and real-world 
application examples. 
It is ideal for classroom 
and online instruction. 
At the end of the term 
my students comment 
on how much they’ve 
learned and put to use 
outside the classroom.” 
—Customer at 
St. Johns River 
Community College 


Preface 


The New Perspectives Series’ critical-thinking, problem-solving approach is the ideal way 
to prepare students to transcend point-and-click skills and take advantage of all that 
HTML 5 and CSS has to offer. 


In developing the New Perspectives Series, our goal was to create books that give students 
the software concepts and practical skills they need to succeed beyond the classroom. We've 
updated our proven case-based pedagogy with more practical content to make learning 
skills more meaningful to students. With the New Perspectives Series, students understand 
why they are learning what they are learning, and are fully prepared to apply their skills to 
real-life situations. 


About This Book 


This book provides thorough coverage of HTML 5 and CSS, and includes the following: 
e Up-to-date coverage of using HTML 5 to create structured websites 
e Instruction on the most current CSS styles to create visually-interesting pages and 
captivating graphical designs 
¢ Working with browser developer tools to aid in the creation and maintenance of 
fully-functioning websites 
New for this edition! 
¢ Coverage of CSS grid styles for creating grid-based layouts. 
e Exploration of new CSS styles for filters and transformations. 
¢ New hands-on demo pages to interactively explore HTML and CSS concepts. 
e New coding challenges for each tutorial to focus on specific tasks and concepts. 
e New debugging challenges for each tutorial to explore how to fix malfunctioning 
websites. 


System Requirements 


This book assumes that students have an Internet connection, a text editor, and a current 
browser that supports HTML 5 and CSS. The following is a list of the most recent versions of 
the major browsers at the time this text was published: Internet Explorer 11, Microsoft 

Edge 44, Firefox 66, Safari 12.1, Opera 60, and Google Chrome 75. More recent versions may 
have come out since the publication of this book. Students should go to the web browser home 
page to download the most current version. All browsers interpret HTML 5 and CSS code in 
slightly different ways. It is highly recommended that students have several different browsers 
installed on their systems for comparison and, if possible, access to a mobile browser or a 
mobile emulator. Students might also want to run older versions of these browsers to highlight 
compatibility issues. The screenshots in this book were produced using Google Chrome 75 
running on Windows 10 (64-bit), unless otherwise noted. If students are using different devices, 
browsers, or operating systems, their screens might vary from those shown in the book; this 
should not present any problems in completing the tutorials. 


“New Perspectives texts 
provide up-to-date, 
real-world application 
of content, making 
book selection easy. The 
step-by-step, hands-on 
approach teaches 
students concepts they 
can apply immediately.” 
—Customer at 
Southeastern Technical 
College 
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The New Perspectives Approach 


Context 
Each tutorial begins with a problem presented in a “real-world” case that is meaningful to 
students. The case sets the scene to help students understand what they will do in the tutorial. 


Hands-on Approach 

Each tutorial is divided into manageable sessions that combine reading and hands-on, step- 
by-step work. Colorful screenshots help guide students through the steps. Trouble? tips, 
which anticipate common mistakes or problems, help students stay on track and continue 
with the tutorial. 


Visual Overviews 

Each session begins with a Visual Overview, a two-page spread that includes colorful, enlarged 
figures with numerous callouts and key term definitions, giving students a comprehensive 
preview of the topics covered in the session, as well as a handy study guide. 


ProSkills Boxes 

ProSkills boxes provide guidance for applying concepts to real-world, professional situations, 
involving one or more of the following soft skills: decision making, problem solving, teamwork, 
verbal communication, and written communication. 


Key Steps 
Important steps are highlighted in yellow with attached margin notes to help students pay close 
attention to completing the steps correctly and avoid time-consuming rework. 


InSight Boxes 
InSight boxes offer expert advice and best practices to help students achieve a deeper under- 
standing of the concepts behind the software features and skills. 


Margin Tips 

Margin Tips provide helpful hints and shortcuts for more efficient use of the software. The Tips 
appear in the margin at key points throughout each tutorial, giving students extra information 
when and where they need it. 


Try It tips point to demo pages provided with the data folder for interactive exploration of key 
concepts. 


Assessment 

Retention is a key component to learning. At the end of each session, a series of Quick Check 
multiple choice questions helps students test their understanding of the material before mov- 
ing on. New with this edition are Coding Challenges and debugging exercises that focus on a 
few key challenges. Engaging end-of-tutorial Review Assignments and Case Problems have 
always been a hallmark feature of the New Perspectives Series. Colorful bars and brief descrip- 
tions accompany the exercises, making it easy to understand both the goal and level of chal- 
lenge a particular assignment holds. 


Reference 

Within each tutorial, Reference boxes appear before a set of steps to provide a succinct 
summary or preview of how to perform a task. In addition, each book includes a combination 
Glossary/Index to promote easy reference of material. 
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Our Complete System of Instruction 


Coverage To Meet Your Needs 
Whether you’re looking for just a small amount of coverage or enough to fill a semester-long 
class, we can provide you with a textbook that meets your needs. 
¢ Introductory books contain an average of 5 to 8 tutorials and include essential skills 
on the books concepts. 
¢ Comprehensive books, which cover additional concepts and skills in depth, are great 
for a full-semester class, and contain 9 to 12+ tutorials. 
So, if you are looking for just the essential skills or more complete in-depth coverage of a 
topic, we have an offering available to meet your needs. Go to our web site or contact your 
Cengage sales representative to find out what else we offer. 


MindTap 
MindTap is a personalized learning experience with relevant assignments that guide students to 
analyze, apply, and improve thinking, allowing you to measure skills and outcomes with ease. 


For instructors: personalized teaching becomes yours with a Learning Path that is built with 
key student objectives. Control what students see and when they see it. Use as-is, or match to 
your syllabus exactly: hide, rearrange, add, or create your own content. 


For students: a unique Learning Path of relevant readings, multimedia, and activities that guide 
you through basic knowledge and comprehension to analysis and application. 


Better outcomes: empower instructors and motivate students with analytics and reports that 
provide a snapshot of class progress, time in course, engagement, and completion rates. 


The MindTap for HTML 5 and CSS includes coding labs, study tools, and interactive quizzing, 
all integrated into an eReader that includes the full content of the printed text. 


Instructor Resources 

We offer more than just a book. We have all the tools you need to enhance your lectures, check 
students’ work, and generate exams in a new, easier-to-use and completely revised package. This 
book’s Instructor’s Manual, Cognero testbank, PowerPoint presentations, data files, solution files, 
figure files, and a sample syllabus are all available at sso.cengage.com. 
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TUTORIAL 1 


OBJECTIVES 


Session 1.1 

e Explore the history of the web 

¢ Create the structure of an 
HTML document 

e Insert HTML elements and 
attributes 

e Insert metadata into a document 

¢ Define a page title 


Session 1.2 

e Mark page structures with 
sectioning elements 

¢ Organize page content with 
grouping elements 

¢ Mark content with text-level 
elements 

e Insert inline images 

¢ Insert symbols based on 
character codes 


Session 1.3 

e Mark content using lists 

¢ Create a navigation list 

e Link to files within a website 
with hypertext links 

e Link to email addresses and 
telephone numbers 


STARTING DATA FILES 


Getting Started = 


with HTML 5 


Creating a Website for a Food Vendor 


Case | Curbside Thai 


Sajja Adulet is the owner and master chef of Curbside Thai, 

a restaurant owner and now food truck vendor in Charlotte, 

North Carolina that specializes in Thai dishes. Sajja has hired 

you to develop the company’s website. The website will display 
information about Curbside Thai, including the truck’s daily 
locations, menu, catering opportunities, and contact information. 
Sajja wants the pages to convey the message that customers will get 
the same great food and service whether they order in the restaurant 
or from the food truck. Some of the materials for these pages have 
already been completed by a former employee and Sajja needs you 
to finish the job by converting that work into a collection of web 
page documents. To complete this task, you'll learn how to write 
and edit HTML 5 code and how to get your HTML files ready for 
display on the World Wide Web. 


ct_catering_txt.html mp_catering_txt.html code1-1_txt.html 
ct_contact_txt.html mp_events_txt.html 

ct_locations_txt.html mp_index_txt.html 

ct_menu_txt.html mp_menu_txt.html + 5 files 


ct_reviews._txt.html + 16 files 


code2 code3 
code1-2_txt.html code1-3_txt.html + 7 files code1-4_txt.html + 2 files 
ae __ a 

case1 case2 
jtc_index_txt.html dr_faq_txt.html demo_characters.html 
jtc_services_txt.html dr_index_txt.html demo_html.html 
+ 6 files dr_info_txt.html + 9 files + 3 files 


HTML 1 
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Session 1.1 Visual Overview: 


The document type 
declaration is a processing 
instruction indicating the 
markup language used in 
the document. 


The <html> tag 
marks the 
beginning of the 
HTML document. 


<!DOCTYPE html> 
html 


The <head> tag marks 
the document head 

containing information 
about the document. 


head> (An HTML comment is a 
—«— descriptive note added 
to the HTML file. 


The <meta> tag marks 
metadata containing 
information about the 
document. 


<meta charset="utf-8" /> 

<link href="ct_base.css" rel="stylesheet” /> 
<link href="ct_layoutl.css" rel="stylesheet" /> 
titlescurbside Thai</title> ~«. 


The <title> tag marks 
the page title that 

appears on the browser 
| ttle bar or browser tab. 


fhead 


<body> 
<header> 

<img src="ct_logo.png” alt="Curbside Thai” /> 
</header> 


<nav> 


The <body> tag marks 
the document body 
containing all of the 
content that will 


href="ct_about.html"><img src="ct_about.png" alt="About Us" /></a> 


href="ct_locations.html"><img src="ct_lLocations.pr alt="Locations" /></a> 


href="ct_menu.html"><img src="ct_menu.png" alte"Menu" /></a 


ath href="ct_reviews.html"><img src="ct_reviews.png” alt="Reviews"” /></a> 
appear inthe page: href="ct_catering.html"><img src="ct_catering.png" alt="Catering” /></a> 
href="ct yntact.html"><img src="ct_contact.png" alt="Contact Us” /></a 


An opening tag marks 
the start of the element 

content; this tag marks Curbside Thai 4 ; 411 Belde Drive, Charlotte NC 28201 & ; 764-555-1151 
the start of page footer. Foot 


© Kzenon/Shutterstock.com; 

© martiapunts/Shutterstock.com; 
end of the element © Brian A Jackson/Shutterstock.com; 
content; this tag marks the © sayhmog/Shutterstock.com; 


end of the page footer. © rangizzz/Shutterstock.com 


A closing tag marks the 
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The Structure of an HTML Document 


- Document as it appears 
in the browser. 


The exact layout of the 
document elements is 
determined by a style 


sheet and not by the 
document markup. 


Curbside Thai ¢ 411 Belde Drive, Charlotte NC 28207 « 704-555-1151 


Kzenon/Shutterstock.com; © Courtesy Patrick Carey; martiapunts/Shutterstock. 
com; Brian A Jackson/Shutterstock.com; A Studios/Shutterstock.com; rangizzz/ 
Shutterstock.com 
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Exploring the World Wide Web 


It is no exaggeration to say that the World Wide Web has had as profound an effect on 
human communication as the printing press. One key difference is that operation of the 
printing press was limited to a few select tradesmen but on the web everyone can be a 
publisher of a website. Before creating your first website, you'll examine a short history 
of the web because that history impacts the way you write code for your web pages. 
You'll start by exploring the basic terminology of computer networks. 


Networks 


A network is a structure in which information and services are shared among devices 
known as nodes or hosts. A host can be any device that is capable of sending or 
receiving data electronically. The most common hosts that you will work with are 
desktop computers, laptops, tablets, mobile phones, and printers. 

A host that provides information or a service to other devices on the network is 
called a server. For example, a print server provides printing services; a file server 
provides storage space for saving and retrieving files. The device receiving these 
services is called a client. A common network design is the client-server network, 
in which the clients access information provided by one or more servers. 

Networks are classified based on the range of devices they cover. A network 
confined to a small geographic area, such as within a building or department, is 
referred to as a local area network or LAN. A network that covers a wider area, such as 
several buildings or cities, is called a wide area network or WAN. Wide area networks 
typically consist of two or more interconnected local area networks. The largest WAN 
in existence is the Internet, which incorporates an almost uncountable number of 
networks and hosts involving computers, mobile devices (such as phones, tablets, and 
so forth), MP3 players, and gaming systems. 


Locating Information on a Network 


The biggest obstacle to effectively using the Internet is the network’s sheer scope and 
size. Most of the early Internet tools required users to master a bewildering array of 
terms, acronyms, and commands. Because network users had to be well versed in 
computers and network technology, Internet use was largely limited to programmers 
and computer specialists working for universities, large businesses, and the 
government. 

The solution to this problem was developed in 1989 by Timothy Berners-Lee and 
other researchers at the CERN nuclear research facility near Geneva, Switzerland. 
They needed an information system that would make it easy for their researchers to 
locate and share data on the CERN network, and so developed a system of hypertext 
documents. Hypertext is a method of organization in which data sources are 
interconnected through a series of links or hyperlinks activated to jump from one data 
source to another. Hypertext is ideally suited for the Internet because end users don’t 
need to know where a service is located—they only need to know how to activate 
the link. The effectiveness of this technique quickly spread beyond Geneva and was 
adopted across the Internet. The totality of these interconnected hypertext documents 
became known as the World Wide Web. The fact that the Internet and the World 
Wide Web are synonymous in many users’ minds is a testament to the success of the 
hypertext approach. 


Web Pages and Web Servers 


Documents on the web are stored on web servers in the form of web pages and 
accessed through a software program called a web browser. The browser retrieves the 
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document from the web server and renders it in a form readable on a client device. 
However, because there is a wide selection of client devices ranging from desktop 
computers to mobile phones to screen readers that relay data aurally, each web page 
must be written in code that is compatible with every device. How does the same 
document work with so many different devices? To understand, you need to look at 
how web pages are created. 


Introducing HTML 


A web page is a simple text file written in HTML (Hypertext Markup Language). You’ve 
already read about hypertext, but what is a markup language? A markup language is 

a language that describes the content and structure of a document by “marking up” 

or tagging, different document elements. For example, this tutorial contains several 
document elements such as the tutorial title, main headings, subheadings, paragraphs, 
figures, figure captions, and so forth. Using a markup language, each of these elements 
could be tagged as a distinct item within the “tutorial document.” Thus, a Hypertext 
Markup Language is a language that supports tagging distinct document elements and 
connecting documents through hypertext links. 


The History of HTML 


In the early years, no single organization defined the rules or syntax of HTML. Browser 
developers were free to define and modify the language in different ways that, of 
course, led to problems as different browsers supported different “flavors” of HTML 
and a web page that was written based on one browser's standard might appear totally 
different when rendered by another browser. Ultimately, a group of web designers 

and programmers called the World Wide Web Consortium, or the W3C, settled on 

a set of standards or specifications for all browser manufacturers to follow. The W3C 
has no enforcement power, but, because using a uniform language is in everyone’s 
best interest, the W3C’s recommendations are usually followed, though not always 
immediately. Each new version of HTML goes through years of discussion and testing 
before it is formally adopted as the accepted standard. For more information on the 
W3C and its services, see its website at www.w3.org. 

By 1999, HTML had progressed to the fourth version of the language, HTML 4.01, 
which provided support for multimedia, online commerce, and interactive scripts 
running within the web page. However, there were still many incompatibilities in 
how HTML was implemented across different browsers and how HTML code was 
written by web developers. The W3C sought to take control of what had been a 
haphazard process and enforce a stricter set of standards in a different version of 
the language called XHTML (Extensible Hypertext Markup Language). By 2002, the 
W3C had released the specifications for XHTML 1.1. But XHTML 1.1 was intended to 
be only a minor upgrade on the way to XHTML 2.0, which would correct many of the 
deficiencies found in HTML 4.01 and become the future language of the web. One 
problem was that XHTML 2.0 would not be backward compatible with HTML and, as a 
result, older websites could not be easily brought into the new standard. 

Web designers rebelled at this development and, in response, the Web Hypertext 
Application Technology Working Group (WHATWG) was formed in 2004 with the 
mission to develop a rival version to XHTML 2.0, called HTML 5. Unlike XHTML 2.0, 
HTML 5 would be compatible with earlier versions of HTML and would not apply the 
same strict standards that XHTML demanded. For several years, it was unclear which 
specification would win out; but by 2006, work on XHTML 2.0 had completely stalled 
and the W3C issued a new charter for WHATWG to develop HTML 5 as the de facto 
standard for the next generation of HTML. You can learn more about WHATWG and its 
current projects at www.whatwg.org. The current version of HTML is HTML 5.2, which 
achieved Recommendation status in 2017. 


You can find out which 
browsers support the 
features of HTML 5 by 
going to the website 
caniuse.com. 


HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5 


As HTML has evolved, features and code found in earlier versions of the language 
are often deprecated, or phased out, and while deprecated features might not be part 
of HTML 5, that doesn’t mean that you won’t encounter them in your work—indeed, if 
you are maintaining older websites, you will often need to interpret code from earlier 
versions of HTML. Moreover, there are still many older browsers and devices in active 
use that do not support HTML 5. Thus, a major challenge for website designers is 
writing code that takes advantage of HTML 5 but is still accessible to older technology. 

Figure 1-1 summarizes some of the different versions of HTML that have been 
implemented over the years. You can read detailed specifications for these versions at 
the W3C website. 


Figure 1-1 HTML version history 


Version Date Description 

HTML 1.0 1989 The first public version of HTML 

HTML 2.0 1995 HTML version that added interactive elements including web 
forms 

HTML 3.2 1997 HTML version that provided additional support for web 


tables and expanded the options for interactive form 
elements and a scripting language 


HTML 4.01 1999 HTML version that added support for style sheets to 
give web designers greater control over page layout and 
appearance, and provided support for multimedia elements 
such as audio and video 


XHTML 1.0 2001 A reformulation of HTML 4.01 using the XML markup 
language in order to provide enforceable standards for 


HTML content and to allow HTML to interact with other XML 


languages 


XHTML 2.0 — discontinued in 2009 The follow-up version to XHTML 1.1 designed to fix some of 


the problems inherent in HTML 4.01 syntax 


HTML 5.0 2012 HTML version providing support for mobile design, semantic 


page elements, column layout, form validation, offline 
storage, and enhanced multimedia 


HTML 5.2 2017 The current version of HTML 5 


This book focuses on HTML 5, but you will also review some of the specifications 
for HTML 4.01 and XHTML 1.1. Deprecated features from older versions of HTML will 
be noted as such in the text. 


Tools for Working with HTML 


Because HTML documents are simple text files, the first tool you will need is a text 
editor. You can use a basic text editor such as Windows Notepad or TextEdit for the 
Macintosh, but it is highly recommended that you use one of the many inexpensive 
editors that provide built-in support for HTML. These editors include syntax checking 
to weed out errors and automatic insertion of HTML code. Some of the more popular 
HTML editors are Notepad++ (notepad-plus-plus.org), Eclipse (www.eclipse.org), and 
CoffeeCup (www.coffeecup.com). 

These enhanced editors are a good way to start learning HTML and they will be all 
you need for most basic projects, but professional web developers working on large 
websites will quickly gravitate toward using a web IDE (Integrated Development 
Environment), which is a software package providing comprehensive coverage of all 


You can analyze 

each browser for its 
compatibility with 
HTML 5 at the website 
www.htm!5test.com. 
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phases of the development process from writing HTML code to creating scripts for 
programs running on web servers. Some of the popular IDEs for web development 
include Adobe Dreamweaver (www.adobe.com), Aptana Studio (www.aptana.com), 
NetBeans IDE (netbeans.org), and Komodo IDE (komodoide.com). Web IDEs can be 
very expensive, but most software companies will provide a free evaluation period for 
you to test their product to see if it meets your needs. 


Content Management Systems and Frameworks 


You can also invest in a web content management system (wcms) which provides 
authoring tools for website content and administration. Management systems provide 
prepackaged templates so that users can get websites up and running with only a 
minimal knowledge of HTML. Popular content management systems include WordPress 
(www.wordpress.org), Joomla (www.joomla.org), and Drupal (www.drupal.org). 
Content management systems are not without drawbacks. A wcms can be expensive 

to maintain and put extra load on server resources. In addition, the templates and 
authoring tools can be difficult to modify if they don’t exactly meet your needs. 

A website usually involves the integration of many technologies and languages 
beyond HTML, including databases for storing and retrieving data and programs 
running on the web server for managing electronic commerce and communication. 
Managing all those technologies is the job of a web framework that provides the 
foundation of the design and deployment of web applications. Popular frameworks 
include Ruby on Rails (rubyonrails.org), ASP.NET (www.asp.net), AngularJS (angularjs.org), 
and Django (www.djangoproject.com). 

Choosing among all these tools might seem intimidating to you. The bottom line is 
that no matter what tools you use, the final code for the website is written in HTML. So, 
even if that code is generated by a framework or content management system, you still 
need to understand HTML to effectively manage your website. In this book, we'll try to 
keep things as simple as possible: just you, a text editor, and a web browser creating a 
foundation for future study. 


Testing your Code 


nce you've written your code, you can test whether your HTML code employs proper 
syntax and structure by validating it at the W3C validation website (validator.w3.org). 
Validators, like the one available through the W3C website, are programs that test code 
to ensure that it contains no syntax errors. The W3C validator will highlight all of the 
syntax errors in your document with suggestions about how to fix those errors. 

Finally, you'll need to test it to ensure that your content is rendered correctly. 

You should test your code under a variety of screen resolutions, on several different 
browsers and, if possible, on different versions of the same browser because users are 
not always quick to upgrade their browsers. What may look good on a widescreen 
monitor might look horrible on a mobile phone. At a minimum you should test your 
website using the following popular browsers: Google Chrome, Internet Explorer, Apple 
Safari, Mozilla Firefox, and Opera. 

It is not always possible to load multiple versions of the same browser on 
one computer, so, in order to test a website against multiple browser versions, 
professional designers will upload their code to online testing services that report 
on the website’s compatibility across a wide range of browsers, screen resolutions, 
and devices, including both desktop and mobile devices. Among the popular 
testing services are BrowserStack (www.browserstack.com), CrossBrowserTesting 
(www.crossbrowsertesting.com), and Browsera (www.browsera.com). Most of these 
sites charge a monthly connection fee with a limited number of testing minutes, so you 
should not upload your code until you are past the initial stages of development. 


All HTML files have the file 
extension .html or .htm. 


— Figuret-2— J Elements and attributes from an HTML document 


two-sided tag 
enclosing element 
content 


empty elements, 
which do not 
contain content 


several elements 
nested within 
another element 
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Exploring an HTML Document 


Now that you have reviewed the history of the web and some of the challenges in 
developing your own website, you will look at the code of an actual HTML file. To get 
you started, Sajja Adulet has provided you with the ct_start.html file containing the 
code for the initial page users see when they access the Curbside Thai website. Open 
Sajja’s file now. 


To open the ct_start.html file: 


D 1. Use the editor of your choice to open the ct_start.html file from the html01 > 
tutorial folder. 


Figure 1-2 shows the complete contents of the file as viewed in the 
Notepad++ editor. 


<!DOCTYPE html> 
html 
head 
<titleoCurbside Thai</title 
meta harset="“utt-3a" 


meta name="viewport" content="width=device-width, initial-scale 


ink href="ct_base.css" rel="stylesheet" / 


link href="ct_lLayouti.css" rel="stylesheet" > 
(an element attribute | 


body 
heade 


img s ="ct_logo.png" alt="Curbside Thai” / 
header > 


head 


a refe"ct OUT . Html ime rc t_at it ? a ="About Us" ny 
> f= t locatior t img stions.p sLt="Locat 3 
4 ef= menu. htm! mg src= t i alt ¢€ a> 
] ef: t ev ws . html mg pn sit= : 
4 eTt= t ate } tytn ( meg = 2 png ait= ste i] 2 
a ef t n t tml* ed = t t ¢ alt=" t l ) 
< nav 
<Ttoote 
Curbside Thai &£#8226; 411 Belde Drive, Charlotte NC 28201 428226; 764-555-1151 


Trouble? Depending on your editor and its configuration, the text style 
applied to your code might not match that shown in Figure 1-2. This is not a 
problem. Because HTML documents are simple text files, any text styles are 
a feature of the editor and have no impact on how the document is rendered 
by the browser. 


BD 2. Scroll through the document to become familiar with its content but do not 
make any changes to the text. 


The Document Type Declaration 


The first line in an HTML file is the document type declaration or doctype, which 

is a processing instruction indicating the markup language used in the document. 
The browser uses the document type declaration to know which standard to use for 
displaying the content. For HTML 5, the doctype is entered as 


<!DOCTYPE html> 
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You might also see the doctype entered in lowercase letters as 
<!doctype html> 


Both are accepted by all browsers. Older versions of HTML had more complicated 
doctypes. For example, the doctype for HTML 4.01 is the rather foreboding 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http: //www.w3.org/TR/html4/strict.dtd"> 


You might even come across older HTML files that do not have a doctype. Because 
early versions of HTML did not require a doctype, many browsers interpret the 
absence of the doctype as a signal that the page should be rendered in quirks mode, 
based on styles and practices from the 1990s and early 2000s. When the doctype is 
present, browsers will render the page in standards mode, employing the most current 
specifications of HTML. The difference between quirks mode and standards mode can 
mean the difference between a nicely laid-out page and a confusing mess, so always 
put your HTML 5 file in standards mode by including the doctype. 


Introducing Element Tags 


The fundamental building block in every HTML document is the element tag, which 
marks an element in the document. A starting tag indicates the beginning of that 
element, while an ending tag indicates the ending. The general syntax of a two-sided 
element tag is 


<element>content</element> 


where element is the name of the element, content is the element's content, 
<element> is the starting tag, and </element> is the ending tag. The following code 
marks a paragraph element enclosed within the <p> and </p> tags: 


<p>Welcome to Curbside Thai.</p> 


The <p></p> tags indicate the presence of a paragraph and the text Welcome to 
Curbside Thai. comprises the paragraph text. 

Not every element tag encloses document content. Empty elements are elements 
that are either nontextual (such as images) or contain directives to the browser about 
how the page should be treated. An empty element is entered using one of the 
following forms of the one-sided element tag: 


<element /> 
or 
<element> 


The following br element indicates the presence of a line break in the text, and thus 
does not contain any content: 


<br /> 


Note that, while this code could also be entered as <br>, the ending slash /> form is 
required in XHTML documents as well as other markup languages. While HTML 5 
allows for either form, it’s a good idea to get accustomed to using the ending slash 
/> form if you intend to work with other markup languages. We’ll follow the /> 
convention in the code in this book. 

Elements can contain other elements, which are called nested elements. In the 
following code, the em element (used to mark emphasized text) is nested within the 
paragraph element by placing the <em> tag completely within the <p> tag. 
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Proper syntax: 
<p>Welcome to <em>Curbside Thai</em>.</p> 


When nesting one element inside of another, the entire code of the inner element 
must be contained within the outer element, including opening and closing tags. Thus, 
it would not be correct to place the closing tag for the em element outside of the p 
element as in the following code: 


Improper syntax: 
<p>Welcome to <em>Curbside Thai</p>.</em> 


Now that you've examined the basics of tags, you'll examine at how they’re organized 
within an HTML file. 


The Element Hierarchy 


The entire structure of an HTML document can be thought of as a set of nested 
elements in a hierarchical tree. At the top of the tree is the html element marking the 
entire document. Within the html element is the head element enclosing information 
about the document itself and the body element enclosing the content of the web page. 
Thus, the general structure of an HTML file, like the one shown in Figure 1-2, is 


<!DOCTYPE html> 
<html> 
<head> 

head content 
</head> 


<body> 

body content 
</body> 
</html> 


where head content and body content are nested elements placed within the 
document head and body. Note that the body element is always placed after the head 
element. 


Creating the Basic Structure of an HTML File 
e To create the basic structure of an HTML file, enter the tags 


<!DOCTYPE html> 
<html> 
<head> 

head content 
</head> 


REFERENCE 


<body> 

body content 
</body> 
</html> 


where head, content, and body content contain nested elements that mark the 
content of the head and body sections. 


Attributes can be listed in 
any order but they must 
come after the element 
name and be separated 
from each other by a blank 
space; each attribute value 
must be enclosed within 
single or double quotation 
marks. 
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Introducing Element Attributes 


Elements often contain one or more element attributes providing additional 
information about the purpose of the element or how the element should be handled 
by the browser. The general syntax of an element attribute within a two-sided tag is 


<element attri="valuel" attr2="value2" ..> 
content 
</element> 


Or, for a one-sided tag 
<element attri="valuel" attr2="value2" .. /> 


where attri, attr2, and so forth are attributes associated with element and valuel, 
value2, and so forth are the corresponding attribute values. For example, the following 
code adds the id attribute with the value "intro" to the <p> tag in order to identify the 
paragraph as an introductory paragraph. 


<p id="intro">Welcome to Curbside Thai.</p> 


Each element has its own set of attributes but, in addition to these element-specific 
attributes, there is a core set of attributes that can be applied to almost every HTML 
element. Figure 1-3 lists some of the most commonly used core attributes; others are 
listed in Appendix B. 


Figure 1-3 Commonly used core HTML attributes 


Attribute 


Description 


class="text" 


dir="1tr|rt1l|auto" 
hidden 


id="text" 
lang="text" 
style="definition" 


tabindex="integer" 


title="text" 


Defines the general classification of the element 


Defines the text direction of the element content as left-to-right, 
right-to-left, or determined by the browser 


Indicates that the element should be hidden or is no longer 
relevant 


Provides a unique identifier for the element 
Specifies the language of the element content 
Defines the style or appearance of the element content 


Specifies the tab order of the element (when the tab button is 
used to navigate the page) 


Assigns a title to the element content 


For attributes that do not require a value, HTML supports attribute minimization by 


removing the attribute value completely. For example, the hidden attribute used in the 
following code does not require a value; its mere presence indicates that the marked 
paragraph should be hidden in the rendered page. 


<p hidden>Placeholder Text</p> 


Attribute minimization is another example of how HTML 5 differs from other 
markup languages such as XHTML in which minimization is not allowed and all 
attributes must have attribute values. 
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Adding an Attribute to an Element 


e To add an attribute to an element, enter 
<element attri="valuel" attr2="Vvalue2" ..> 
content 
</element> 


where attri, attr2, andso forth are HTML attributes associated with element and 
value1, value2, and so forth are the corresponding attribute values. 


Handling White Space 


An HTML file is composed only of text characters and white-space characters. A white- 
space character is any empty or blank character such as a space, tab, or line break. 
The browser reading the HTML code ignores the presence of white-space characters 
between element tags and makes no distinction between spaces, tabs, or line breaks. 
Thus, a browser will treat the following two pieces of code the same: 


<p>Welcome to <em>Curbside Thai</em>.</p> 
and 


<p> 
Welcome to <em>Curbside Thai</em>. 
</p> 


The browser also collapses consecutive occurrences of white-space characters into a 
single occurrence, so that the text of the paragraph in the following code is still treated 
as “Welcome to Curbside Thai”, ignoring the extra white spaces between “Curbside” 
and “Thai”. 


<p> 
Welcome to <em>Curbside Thai</em>. 
</p> 


The bottom line is that it doesn’t matter how you lay out your HTML code because 
the browser is only interested in the text content and not how that text is entered. This 
means you can make your file easier to read by indenting lines and by adding extra 
white-space characters to separate one code block from another. However, this also 
means that any formatting you do for the page text to make the code more readable, 
such as tabs or extra white spaces, is not transferred to the web page. 


Viewing an HTML File in a Browser 


The structure of the HTML file shown in Figure 1-2 should now be a little clearer, even 
if you don’t yet know how to interpret the meaning and purpose of each of element and 
attribute. To see what this page looks like, open it within a web browser. 


To open the ct_start.html file in a web browser: 


BD 1. Open your web browser. You do not need to be connected to the Internet to 
view local files stored on your computer. 


D 2. After your browser loads its home page, open the ct_start.html file from the 
html01 » tutorial folder. Figure 1-4 shows the page as it appears on a mobile 
phone and on a tablet device. The two devices have different screen widths, 
which affects how the page is rendered. 
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The Curbside Thai starting page as rendered by a mobile and tablet device 


a ————_—— 


Thai 


Authentic Gourmet Thot Food 


© Brian A Jackson/Shutterstock.com; © sayhmog/Shutterstock.com; 


© rangizzz/Shutterstock.com; BenBois/openclipart; 


© Kzenon/Shutterstock.com; © martiapunts/Shutterstock.com; 
Jmlevick/openclipart 


mobile device tablet device 


Trouble? If you're not sure how to open a local file with your browser, check 
for an Open or Open File command under the browser's File menu. You 

can also open a file by double-clicking the file name from within Windows 
Explorer or Apple Finder. 


BD 3. Reduce the width of your browser window and note that when the width 
falls below a certain value (in this case 480 pixels), the layout automatically 
changes to a stacked row of images (as shown in the mobile device image in 
Figure 1-4) that are better suited to the narrower layout. 


D 4. Increase the width of the browser window and confirm that the layout 
changes to a 2x3 grid of images (as shown in the tablet device image in 
Figure 1-4), which is a design more appropriate for the wider window. 


Figure 1-4 illustrates an important principle: HTML does not describe the 
document’s appearance, it only describes the document's content and structure. The 
same HTML document can be rendered differently on different devices or screen sizes. 
The actual appearance of the document is determined by style sheets—a topic you'll 
explore later in this tutorial. 


Creating an HTML File 


Now that you've studied the structure of an HTML file, you’ll start creating your 

own documents for the Curbside Thai website. Sajja wants you to create a web page 
containing information about the restaurant. Start by inserting the doctype and the 
markup tags for the html, head, and body elements. You will also specify English (en) 
as the language of the web page by adding the lang attribute to the <html> tag. 
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HTML filenames should 
be entered in lowercase 
letters and have no blank 
spaces. 


BD 1. Using the editor of your choice, create a new blank HTML file in the html01 » 


HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5 


To begin writing the HTML file: 


2. 


tutorial folder, saving the file as ct_about.html. 


Enter the following code into the file: 


<!DOCTYPE html> 
<html lang="en"> 


<head> 
</head> 


<body> 
</body> 


</html> 


Figure 1-5 shows the initial elements in the document. 


Figure 1-5 Initial structure of the ct_about.html file 


opening <html> tag 
marks the start of 
the document and 
specifies the 
language 


body element will 
contain the content 
displayed by the 

browser 


document type declaration 


identifies the markup 


language as html 


<!DOCTYPE html> 
<html Lang="en"> 


<head> 
</head> 


<body> 
</body> 


</html> 


head element will 
contain information 
about the document 


closing </html> tag 
marks the end of 
the document 


BD 3. Save your changes to the file. 


Next, you'll add elements to the document head. 
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Written Communication: Writing Effective HTML Code 


Part of writing good HTML code is being aware of the requirements of various 
browsers and devices, as well as understanding the different versions of the language. 
Here are a few guidelines for writing good HTML code: 


e Become well versed in the history of HTML and the various versions of HTML and 
XHTML. Unlike other languages, HTML's history does impact how you write your 
code. 

¢ Know your market. Do you have to support older browsers, or have your clients 
standardized on one particular browser or browser version? Will your web pages be 
viewed on a single device such as a computer, or do you have to support a variety 
of devices? 

¢ Test your code on several different browsers and browser versions. Don’t assume 
that if your page works in one browser, it will work in other browsers or even in 
earlier versions of the same browser. Also check on the speed of the connection. A 
large file that performs well with a high-speed connection might be unusable with a 
slower connection. 

e Read the documentation on the different versions of HTML and XHTML at the W3C 
website and keep up to date with the latest developments in the language. 


PROSKILLS 


To effectively communicate with customers and users, you need to make sure your 
website content is always readable. Writing good HTML code is a great place to start. 


Creating the Document Head 


The document head contains metadata, which is content that describes the document 
or provides information about how the document should be processed by the browser. 
Figure 1-6 describes the different metadata elements found in the document head. 


Figure 1-6 HTML metadata elements 


Element Description 


head Contains a collection of metadata elements that describe the document or 
provide instructions to the browser 


base Specifies the document's location for use with resolving relative hypertext 
links 

link Specifies an external resource that the document is connected to 

meta Provides a generic list of metadata values such as search keywords, viewport 
properties, and the file’s character encoding 

script Provides programming code for programs to be run within the document 

style Defines the display styles used to render the document content 

title Stores the document's title or name, usually displayed in the browser title bar 


or on a browser tab 


The first metadata you'll add to the About Curbside Thai web page is the title element. 
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Document titles should be 
no more than 64 characters 
in length to ensure that the 
text fits on the browser title 
bar or a browser tab. 
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Setting the Page Title 


The title element is part of the document head because it’s not displayed within the 
web page, but rather in the browser title bar or browser tab. Page titles are defined 
using the following title element 


<title>document title</title> 


where document title is the text of the title. Add a page title to the Curbside Thai 
page now. 


Adding a Document Title 
¢ To define the document title, enter the following tag into the document head: 
<title>document title</title> 


where document title is the text that will appear on the browser title bar or a 
browser tab. 


To insert the document title: 


D 1. Directly after the opening <head> tag, insert the following title element, 
indented to make the code easier to read. 


<title>About Curbside Thai</title> 


Figure 1-7 highlights the code for the page title. 


Figure 1-7 Entering the document title 


<!DOCTYPE html> 
<html Lang="en"> 


<head> 
<title>About Curbside Thai</title> 


</head> 


title text that appears 
in the browser title bar 
or on a browser tab 


<body> 
</body> 


</html> 


BD 2. Save your changes to the file. 


Adding Metadata to the Document 


Another metadata is the meta element, which is used for general lists of metadata 
values. The meta element structure is 


<meta attributes /> 


where attributes define the type of metadata that is to be added to a document. 
Figure 1-8 lists the attributes of the meta element. 
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Figure 1-8 Attributes of the meta element 
Attribute Description 
charset="encoding" Specifies the character encoding used in the 
HTML document 
content="text" Provides the value associated with the 


http-equiv or name attributes 


http-equiv="content-type|default- Provides an HTTP header for the document's 


style|refresh" content, default style, or refresh interval (in 
seconds) 
name="text" Sets the name associated with the metadata 


For example, you can use the following meta element to provide a collection of 
keywords for the Curbside Thai website that would aid web search engines, such as 
Google or Bing search tools, to locate the page for potential customers: 


<meta name="keywords" content="Thai, restaurant, Charlotte, food" /> 


The name attribute defines the type of metadata and the content attribute provides the 
data values. HTML does not specify a set of values for the name attribute, but commonly 
used names include keywords, description, author, and viewport. 

Another use of the meta element is to define the character encoding used in the 


Tana entine HTML file. Character encoding is the process by which the computer converts text 


charset meta element are into a sequence of bytes when it stores the text and then converts those bytes back into 
both required in a valid characters when the text is read. The most common character encoding is UTF-8, which 
RIMES cecument supports almost all of the characters you will need. To indicate that the document is 


written using UTF-8, add the following meta element to the document head: 
<meta charset="utf-8" /> 


The charset attribute was introduced in HTML 5 and replaces the following more 
complicated expression used in earlier versions of HTML: 


<meta http-equiv="Content-Type" content="text/html; 
charset=UTF-8" /> 


Adding Metadata to the Document 
© To define the character encoding used in the document, enter 
<meta charset="encoding" /> 


where encoding is the character encoding used in the document. 
e To define search keywords associated with the document, enter 
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<meta name="keywords" content="terms" /> 


where terms is a comma-separated list of keyword terms. 


Add meta elements to the document head now, providing the character set and a list 
of keywords describing the page. 
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The <meta> tag that 
defines the character 
encoding should always be 
the first meta element in 
the document head. 


To insert metadata: 


D 1. Directly after the opening <head> tag, insert the following meta elements, 
indented to make the code easier to read: 


<meta charset="utf-8" /> 
<meta name="keywords" 
content="Thai, restaurant, Charlotte, food" /> 


Figure 1-9 highlights the newly added meta elements used in the document 
head. 


Figure 1-9 Adding metadata to a document 


Always include comments 
when working with a team 
so that you can document 
the development process 
for other team members. 


character encoding 
used in the document 


keywords used for 
search engines 


<head> 
<meta charset="utf-8" /> 
<meta name="keywords" - 
content="Thai, restaurant, Charlotte, food" /> 
<title>About Curbside Thai</title> 
</head> 


BD 2. Save your changes to the file. 


D 3. Open the ct_about.html file in your browser. Confirm that the browser tab or 
browser title bar contains the text “About Curbside Thai”. There should be 
no text displayed in the browser window because you have not added any 
content to the page body yet. 


Before continuing with your edits to the ct_about.html file, you should document 
your work. You can do this with HTML comments. 


Adding Comments to Your Document 


An HTML comment is descriptive text that is added to the HTML file but that does not 
appear in the page. Comments can include the name of the document's author, the 
date the document was created, and the purpose for which the document was created. 
Comments are added with the following markup: 


<l-= comment =-> 


where comment is the text of the comment or note. For example, the following code 
inserts a comment describing the Curbside Thai page: 


<!-- General Information about Curbside Thai --> 


A comment can be spread across several lines as long as the comment begins 
with <!-- and ends with -->. Because comments are ignored by the browser, they can 
be added anywhere within a document, though it’s good practice to always include 
a comment in the document head in order to describe the document content that 
follows. 
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Adding a Comment to an HTML Document 
¢ To insert a comment anywhere within your HTML document, enter 
ele= @Comlusiac == 


where comment is the text of the HTML comment. 


REFERENCE 


Add comments to the ct_about.html file indicating the document's author, date of 
creation, and purpose. 


To add a comment to the document: 
D 1. Return to the et_about.html file in your HTML editor. 
Dd 2. 


i 


Figure 1-10 Adding a comment to the document 


<head> 
Nes 
New Perspectives on HTML5 and CSS3, 8th Edition 
Tutorial 1 
Tutorial Case 
CG t added a eit aaa ee ‘ : : 
General Information about Curbside Thai 
Author:  Sajja Adulet 
Date: 3/1/2021 
Filename: ct_about.html 
=. 
<meta charset="utf-8" /> 
<meta name="keywords" 
content="Thai, restaurant, Charlotte, food" /> 
<title>About Curbside Thai</title> 
</head> 


BD 3. Save your changes to the file. 
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Conditional Comments and Internet Explorer 


Another type of comment you will encounter in many HTML files is a conditional 
© comment, which encloses content that should only be run by particular versions of the 
W) — Internet Explorer browser. The general form of the conditional comment is 
2 
—! <!--[if operator IE version] > 
content 


<! [endif] --> 


where operator is a logical operator (such as less than or greater than), version is 
the version number of an Internet Explorer browser, and content is the HTML code 
that will be run only if the conditional expression is true. The following code uses the 
It (less than) logical operator to warn users that they need to upgrade their browser if 
they are running Internet Explorer prior to version 8. 


<!--[if lt IEF 8]> 
<p>Upgrade your browser to view this page.</p> 
<! [endif] --> 


Other logical operators include 1te (less than or equal to), gt (greater than), gte 
(greater than or equal to), and ! (not). For example, the following code uses the logical 
operator ! to display the paragraph text only when the browser is not Internet Explorer: 


<!--[if !IE]> 
<p>You are not running Internet Explorer.</p> 
<! [endif] --> 


Note that if you omit the version number, the conditional comment is applied to all 
Internet Explorer versions. 

The need for conditional comments arose because Internet Explorer significantly 
differed from other browsers in how it implemented HTML and there was a need to 
separate the code meant for the IE browser from code meant for other browsers. This 
is not as much of a problem with Microsoft ending development of Internet Explorer 
in favor of the Edge browser, but you may still encounter legacy websites that use 
conditional comments in their code. 


In the next session, you'll continue your work on the ct_about.html file by adding 
content to the page body. 
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" Session 1.1 Quick Check 


1. What is a markup language? 
a. A language used for e-commerce websites 
b. A language describing the content and structure of a document by tagging 
document elements 
c. A language introduced by Microsoft for use in web browsers 
d. A language that defines the appearance of web pages for computers and 
cell phones 
2. WordPress is a: 
a. web browser 
b. text editor 
c. web content management system 
d. web framework 


3. What does W3C stand for? 
a. World Wide Web Computing 
b. World Wide Web Corporation 
c. World Wide Web Creators 
d. World Wide Web Consortium 
4. Which of the following is the proper form of an HTML 5 doctype? 
a. <doctype html> 
b. <DOCTYPE html> 
Cc. <doctype>html</doctype> 
d. <!DOCTYPE html1> 
5. Which of the following defines the page title for an HTML document? 
a. <title>My Web Page</title> 
b. <pageTitlesMy Web Page</title> 
Cc. <head id="title">My Web Page</title> 
d. <titleStartsMy Web Page</titleEnds 
6. Which of the following is not proper HTML syntax? 


a. <p>Welcome to my <em>web page</em></p> 


REVIEW 


b. <em><p>Welcome to my web page</em></p> 
Cc. <p><em> 
Welcome to my 
web page 
</em></p> 


d. <p>Welcome to my 
<em>web page</em> 
</p> 
7. Which of the following defines “restaurant” as a search keyword for a web 
page? 
a. <keyword>restaurant</keyword> 
b. <meta>restaurant</meta> 
c. <meta name="keywords" content="restaurant" /> 
d. <meta keyword="restaurant" type="search" /> 
8. Which of the following uses the proper syntax for creating an HTML comment? 
a. <! Home page for my personal website> 
b. <comment>Home page for my personal website</comment> 
c. // Home page for my personal website 
d. <!-- Home page for my personal website --> 
9. True or false: HTML describes how content should be rendered by the browser. 
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Session 1.2 Visual Overview: 


The <img> tag marks an 
image using the file specified 
in the src attribute. 


<body> 
<header> 
<img src="ct_logo2.png" alt="Curbside Thai" /> 


</header> 
The <h1> tag marks 
‘ y a major heading. ] The <strong> tag marks 
<article> text of major importance 
<h1>About Us</h1> or seriousness. 


<img src="ct_photol.png" alt=""¥/> 
<p>£strongscurbside Thai*/strong® brings the rich flavor 


of Thailand to North Carolina. Master Chef Sajja Adulet, 

: ae : The <p> tag marks 
with over 35 years of experience at the House of Asia, now a (sete 
offers that same fine dining to the streets of Charlotte 


with our modern mobile food truck.</p> 


<p>This is not bland vendor food packaged in greasy 
paper boxes! Sample his acclaimed cuisine at our various 
mobile locations throughout downtown Charlotte from 

11 a.m. to 7 p.m. on Monday through Thursday, and 

11 a.m. to 11 p.m. on Friday and Saturday. Taste the 
difference! If you can't get away from your desk, 


<em>Curbside Thai will deliver</em>.</p> Wo ania 
emphasized text. 
<p>Contact us to cater your next party and experience 


what <cite>Carolina Traveler</cite> calls <q>the finest Asian food 
on or ofthe streets of Charlotte</q>.</p> A character entity 


</article> reference inserts a 
character based ona 
defined name. 

<footer> 

Curbside [Thai &#8226; 411 Belde Drive, Charlotte NC &nbsp; 28201 &#8226; 704-555-1151 
</footer> 
</body> 


A numeric character 
reference inserts a character 
based on its code value. 


The <cite> tag 
marks a citation. 


© Kzenon/Shutterstock.com 
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HTML Page Elements 


of the article is marked 
with the <p> tag. 


The main heading of 
the article is marked 
with the <h1> tag. 


The restaurant name is marked 
with the <strong> tag to 
indicate its importance. 


r 
About Us 


Curbside Thai brings the rich flavor of Thailand to North Carolina. 
Ovner and chef Saya Adulet. with over 35 years of experienc? as the 
award-wimning master chef at the House of Asia. now offers that same 


fine dining to the streets of Charlotte through our modem mobile food 
truck, 


This is not bland vendor food packaged in greasy paper boxes! Sample 
our acclaimed cuisine at our various mobile locations throughout 
downtown Charlotte from 11am: to 7 p:m: (M-R) and 11 am. to 11 
p.m. on Friday and Saturday. Taste the difference! If you can't get away 
from your desk. Crbside Thai will deliver. 


Kzenon/Shutterstock.com 


Nonbreaking space is 
inserted with the &nbsp; 
character entity reference. 


your next party and experience what Carolivia Traveler calls “the finest Asian food on or off the streets of 


Contact us to cate 


Charlotte. A citation to a magazine is 


marked with the <cite> tag. 


Curbside Thai * 411 Belde Drive, Charlotte NC 28201 » 704-555-1151 


An example of emphasized text 
is marked with the <em> tag. 


Bullet characters are inserted 
with the &#8226; numeric 


character reference. 
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Writing the Page Body 


Now that you have created the document head of the About Curbside Thai web page, 
you'll begin writing the document body, starting with general markup tags identifying 
the major sections of the page body, and working inward to more specific content 
within those sections. 


Using Sectioning Elements 


The first task in designing the page body is identifying the page’s major topics. A page 
typically has a header, one or more articles that are the chief focus of the page, and a 
footer that provides contact information for the author or company. HTML marks these 
major topical areas using the sectioning elements described in Figure 1-11. 


HTML sectioning elements 


Element Description 

address Marks contact information for an individual or group 

article Marks a self-contained composition in the document such as a newspaper story 
aside Marks content that is related to a main article 

body Contains the entire content of the document 

footer Contains closing content that concludes an article or section 


hil, h2, h3, Marks major to minor headings with h1 representing the heading with the highest 
h4, h5, hé rank, h2 representing next highest-ranked heading, and so forth 


header Contains opening content that introduces an article or section 
nav Marks a list of hypertext or navigation links 
section Marks content that shares a common theme or purpose on the page 


For example, a news blog page might contain several major topics. To identify these 
areas, the HTML code for the blog might include the following elements marking off 
the page’s header, navigation list, article, aside, and footer. 


<body> 
<header> 
</header> 
<nav> 
</nav> 
<article> 
</article> 
<aside> 
</aside> 
<footer> 
</footer> 

</body> 


|| These sectioning elements are also referred to as semantic elements because the tag 
oe name describes the purpose of the element and the type of content it contains. Even 
ectioning elements can a é i - f 
fe areal Wan eeae without knowing much about HTML, the page structure defined in the above code is 
other; an article might easily understood from the tag names. 
contain its own header, 
footer, and collection of 
navigation links. 
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Defining Page Sections 


¢ To mark the page header, use the header element. 

e To mark self-contained content, use the article element. 

¢ To mark a navigation list of hypertext links, use the nav element. 
e To mark a sidebar, use the aside element. 

¢ To mark the page footer, use the footer element. 

¢ To group general content, use the section element. 


REFERENCE 


The About Curbside Thai page will have a simple structure containing a header, a 
single article, and a footer. Within the header, there will be an h1 element providing a 
main topic heading (not to be confused with the document title, which is displayed on 
the browser title bar or a browser tab). Add this structure to the document body. 


To define the sections in the page body: 


D 1. If you took a break after the previous session, return to the ct_about.html file 
in your HTML editor. 


D 2. Directly after the opening <body> tag, insert the following HTML code, 
indented to make the code easier to read: 


<header> 
<hl>Curbside Thai</h1> 
</header> 
<article> 
<hl>About Us</h1> 
</article> 
<footer> 
Curbside Thai 411 Belde Drive, Charlotte NC 28201 704-555-1151 
</footer> 


Figure 1-12 highlights the sectioning elements used in the page body. 


Adding sectioning elements to the page body 


<body> 
<header> 
<hi>Curbside Thai </h1>—<——{ page heading ] 
</header> 


; =a? Karticle> 
<h1l>About Us</h1> article heading 
document 3 


</article> 
<footer> 
Curbside Thai 411 Belde Drive, Charlotte NC 28201 704-555-1151 
</footer> 
</body> 


BD 3. Save your changes to the file. 
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Comparing Sections in HTML 4 and HTML 5 


Many of the sectioning elements described in Figure 1-11 were introduced in HTML 5. 
Prior to HTML 5, sections were defined as divisions created using the following div 
element: 


<div id="id"> 
content 
</div> 


where id uniquely identifies the division. Figure 1-13 shows how the same page layout 
marked up using sectioning elements in HTML 5 would have been defined in HTML 
4.01 using div elements. 


Figure 1-13 Sections in HTML 5.0 vs. divisions in HTML 4.01 


HTML 5.0 


<header></header> 


<nav></nav> <section></section> <aside></aside> 


<article></article> 


<footer></footer> 


HTML 4.01 


<div id="header"></div> 


<div id="nav"> <div id="section"></div> 


</div> 
<div id="article"> 
</div> 


<div id="footer"></div> 


One problem with div elements is that there are no rules for ids. One web designer 
might identify the page heading with the id header, while another designer might use 
heading or top. The lack of consistency makes it harder for search engines to identify 
the page’s main topics. The advantage of the HTML 5 sectioning elements is that their 
tag name indicates their purpose in the document, leading to greater uniformity in how 
pages are designed and interpreted. However, you might still encounter use of the div 
element in older websites and within the code generated by web frameworks. 


Using Grouping Elements 


Within sectioning elements are grouping elements. Each grouping element organizes 
similar content into a distinct group, much like a paragraph groups sentences that share 
a common theme. Figure 1-14 describes the HTML grouping elements. 
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Figure 1-14 HTML grouping elements 


Element Description 

blockquote Contains content that is quoted from another source, often with a citation and 
often indented on the page 

div Contains a generic grouping of elements within the document 

di Marks a description list containing one or more dt elements with each followed by 
one or more dd elements 

dt Contains a single term from a description list 

da Contains the description or definition associated with a term from a description list 

figure Contains an illustration, photo, diagram, or similar object that is cross-referenced 
elsewhere in the document 

figcaption Contains the caption associated with a figure 

hr Marks a thematic break such as a scene change or a transition to a new topic 
(often displayed as a horizontal rule) 

main Marks the main content of the document or application; only one main element 
should be used in the document 

ol Contains an ordered list of items 

ul Contains an unordered list of items 

li Contains a single item from an ordered or unordered list 

P Contains the text of a paragraph 

pre Contains a block of preformatted text in which line breaks and extra spaces in the 


code are retained (often displayed in a monospace font) 


The following code shows three paragraphs nested within a page article with each 
paragraph representing a group of similar content: 


<article> 
<p>Content of 1°%* paragraph.</p> 
<p>Content of 2"* paragraph.</p> 
<p>Content of 3%? paragraph.</p> 
</article> 


The default style for browsers is to start sectioning or grouping elements on a new 
line, separating them from any content that appears before it. Thus, each of these 
paragraphs will appear in the web page on a new line as will the article itself. Note that 
the exact appearance of the paragraphs and the space between them depends on the 
styles applied by the browser to those elements. You'll learn more about styles later in 
this tutorial. 


Defining Page Groups 


¢ To mark a paragraph, use the p element. 

e To mark an extended quote, use the blockquote element. 

¢ To mark the main content of a page or section, use the main element. 
¢ To mark a figure box, use the figure element. 

¢ To mark a generic division of page content, use the div element. 


REFERENCE 


HTML 28 


Sajja has written an article describing Curbside Thai. Enter the text of the article into 
the article element in the About Curbside Thai web page and use p elements to mark 
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the paragraphs in the article. 


To group the page text into paragraphs: 


» 1. 


Use a text editor to open the ct_pages.txt file from the htm|01 » tutorial 
folder. 


Select and copy the three paragraphs of text directly after the About Us title. 


Close the file, but do not save any changes you may have inadvertently made 


to the document. 


Return to the ct_about.htnll file in your HTML editor. 


Directly after the <h1>About Us</h1> line within the page article, insert a 


new blank line and paste the text you copied. 


Enclose each of the three paragraphs of pasted content between an opening 
<p> tag and a closing </p> tag. Indent the code within the article element 


to make the code easier to read. 


Figure 1-15 highlights the newly added code for the three paragraphs of 
article text. 


Figure 1-15 Grouping article content by paragraphs 


art 


first paragraph |—————>> 


second paragraph 
third paragraph { y 


le 

About Us</hl 

rich flavor of Thailand to 
Chef Sajja Adulet, with over 35 


Curbside Thai brings the 
North Carolina. 


Master 
f jence at row offers 


the House of Asia, 


years oO 
that same fine 


modern mobile 


exper 
dining to the streets of Char lotte 


with our food truck. 


This is not bland vendor food packaged in greasy 

paper boxes! Sample his acclaimed cuisine at our various 
mobile locations througnout downtown Charlotte from 

11 a.m. to 7 p.m. on Monday through Thursday, and 

11 a.m. to 11 p.m. on Friday and Saturday. Taste the 
difference! If you can't get away from your desk, 


Curbside Thai will deliver. 


Contact us to cater your next party and experience 
what Carolina Traveler calls the finest Asian food 
off the streets 


on ofr 


of Charlotte. | 


each paragraph is enclosed 
within an opening <p> tag 
and a closing </p> tag 


BD 7. Save your changes to the file. 
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Using Text-Level Elements 


Within each grouping element are text-level elements, which mark phrases or 
characters within a paragraph. Unlike sectioning or grouping elements that mark a 
self-contained block of content, text-level elements appear in line with the surrounding 
content and are known as inline elements. For example, the italicized or boldface 

text in this paragraph is considered inline content because it appears alongside the 
surrounding text. Figure 1-16 describes some of the many text-level elements in HTML. 


Figure 1-16 HTML text-level elements 


Element Description 


a Marks content that acts as a hypertext link 

abbr Marks an abbreviation or acronym 

b Indicates a span of text to which attention should be drawn (text usually appears in bold) 

br Represents a line break within the grouping element 

cite Marks a citation to a title or author of a creative work (text usually appears in italics) 

code Marks content that represents computer code (text usually appears in a monospace 
font) 

data Associates a data value with the marked text with the value attribute providing the 
value 

din Marks a defined term for which a definition is given elsewhere in the document 

em Indicates content that is emphasized or stressed (text usually appears in italics) 

i Indicates a span of text that expresses an alternate voice or mood (text usually appears 
in italics) 

kbd Marks text that represents user input, typically from a computer keyboard or a voice 
command 

mark Marks content that is highlighted for reference purposes 

gq Marks content that is quoted from another source 

s Marks content that is no longer accurate or relevant (text is usually struck through) 

samp Marks text that represents the sample output from a computer program or application 

small Marks side comments (text usually in small print) 

span Contains a generic run of text within the document 

strong Indicates content of strong importance or seriousness (text usually appears in bold) 

sub Marks text that should be treated as a text subscript 

sup Marks text that should be treated as a text superscript 

time Marks a time value or text string 

u Indicates text that appears stylistically different from normal text (text usually appears 
underlined) 

var Marks text that is treated as a variable in a mathematical expression or computer 
program 

wbr Represents where a line break should occur, if needed, for a long text string 


The following HTML code demonstrates how to employ text-level elements to mark 
select phrases or characters within a paragraph. 


<p> 
Contact us to cater your next party and experience what 
<cite>Carolina Traveler</cite> calls <q>the finest 
Asian food on or off the streets of Charlotte.</q> 


</p> 
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Two text-level elements are used in this paragraph: the cite element marks the citation 
to the Carolina Traveler magazine and the g element marks the direct quote from the 
magazine's review of Curbside Thai. Both the citation and the quoted material will 
appear alongside other text within the paragraph. 


Defining Text-Level Content 


¢ To mark emphasized text, use the em element. 

¢ To mark text of great importance, use the strong element. 

e To mark a citation, use the cite element. 

¢ To mark a selection of quoted material, use the g element. 

e To mark a subscript, use the sub element; to mark a superscript, use the sup element. 
¢ To mark a generic selection of text-level content, use the span element. 


REFERENCE 


Use text-level elements in the About Curbside Thai web page to mark examples of 
emphasized text, strongly important text, citations, and quoted material. 


To apply text-level elements to a page: 


BD 1. Go to the first paragraph within the page article and enclose the opening 
words Curbside Thai within a set of opening and closing <strong> tags. Use 
<strong> tags when you want to strongly reinforce the importance of the 
text, such as the restaurant name, for the reader. 


D 2. In the second paragraph, enclose the phrase, Curbside Thai will deliver 
within a set of opening and closing <em> tags to emphasize this text. 


BD 3. Go the third paragraph and mark Carolina Traveler using the cite element 
and then mark the extended quote, the finest Asian food on or off the streets 
of Charlotte, using the q element. 


Figure 1-17 highlights the application of the four text-level elements to the 
paragraph text. 


— Figuret-17 J Marking text-level content 


article 
hil>About Us</hl 
p><strong>Curbside Thai</strong> brings the rich flavor of Thailand to 
strong and North Carolina. Masger Chef Sajja Adulet, with over 35 
important text years of experience |jat the House of Asia, now offers 
marked with the fat some fine dining to the streets of Charlotte 
<strong> tag with our modern mobile food truck.</p 
p>This is not bland vendor food packaged in greasy 
paper boxes! Sample his acclaimed cuisine at ou various 
mobile loc ations througnout downtown Charlotte from quoted mance 
ll a.m. to 7 p.m. on Monday through Thursday, and : 
marked with the 
ll a.m. to 11 p.m. on Friday and Saturday. Taste th 
; Seat el <q> tag 
emphasized text difference! I you can t get away from your desk, 
marked with the —» <em-Curbside Thai will deliver</em>.</p 
<em> tag e>Ccontact us to cater your next party and experience 
what <cite>Carolina Traveler</cite> calls <q>the finest Asian food 
citation marked on or offAthe streets of Charlotte</q>.</p 
with the <cite> tag article 
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BD 4. Save your changes to the file. 


BD 5. Open the ct_about.html file in your browser to view how your browser 
renders the page content. 


Figure 1-18 shows the current appearance of the page. 


The About Curbside Thai page as rendered by the browser 


h1 heading from 
the body header 


Curbside Thai 


strong text 
appears in bold 


h1 heading from 
the page article 


About Us 


Curbside Thai brings the rich flavor of Thailand to North Carolina. Master Chef Sajja Adulet. with 
over 35 years of experience at the House of Asia. now offers that same fine dining to the streets of 
Charlotte with our modern mobile food truck. 


emphasized text is italicized | 

page article This is not bland vendor food packaged in greasy paper boxes! Sample his acclaimed cuisine at our 
various mobile locations throughout downtown Charlotte from 11 am. to 7 pm. on Monday through 
Thursday. and 11 a.m. to 11 p.m_ om@riday and Saturday. Taste the difference! If you can't get away 
from your desk. Curbside Thai will deliver. 


citation is italicized 


Contact us to cater your next party and experience what Carolina Traveler calls [the finest Asian food 
on or off the streets of Charlotte) 


body footer Curbside Thai 411 Belde Drive. Charlotte NC 28201 70. 


quotation marks 
automatically added 
to quoted content 


-555-1151 


Trouble? Depending on your browser, device, and screen settings, you 
might see some minor differences in the appearance of the About Curbside 
Thai web page from that shown in Figure 1-18. 


In rendering the page, the browser made the following stylistic choices for the 
different page elements: 


TRY. IT... ¢ The h1 heading from the body header is assigned the largest font and is displayed in 
You can explore the impact bold to emphasize its importance. The h1 heading from the page article is given a 
of different HTML tags slightly smaller font but is still displayed in bold. 
using the demo_html.html —_—e Strong text is displayed in bold while emphasized text is displayed in italics. 
nals CME OAR er 8 ¢ Citations are displayed in italic while quoted material is automatically surrounded by 
olaer. 


quotation marks. 


It needs to be emphasized again that all of these stylistic choices are not determined 
by the markup tags; they are default styles used by the browser. Different browsers and 
different devices might render these page elements differently. To exert more control 
over your page’s appearance, you can apply a style sheet to the document. 
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Because the link element is 
metadata, it’s always added 
to the document head. 


REFERENCE 


Linking an HTML Document to a Style Sheet 


A style sheet is a set of rules specifying how page elements are displayed. Style sheets 
are written in the Cascading Style Sheets (CSS) language. Like HTML, the CSS language 
was developed and enhanced as the web grew and changed and, like HTML, CSS 
specifications are managed by the W3C.To replace the browser’s internal style sheet 
with one of your own, you can link your HTML file to a style sheet file using the 
following link element: 


<link href="file" rel="stylesheet" /> 


where file is a text file containing the CSS style sheet. Because the link element 
can also be used to link to data other than style sheets, the rel attribute is required 
to tell the browser that it is linking to style sheet data. Older websites might include 
type="text/css" as part of the link href element. 


Linking an HTML Document to an External Style Sheet 


¢ To link an HTML document to an external style sheet file, add the following element 
to the document head: 


<link href="file" rel="stylesheet" /> 


where file is a text file containing the CSS style rules. 


Sajja has supplied you with two CSS files that he wants applied to his website. The 
ct_base.css file contains styles specifying the appearance of text-level elements. The 
ct_layout2.css file contains styles that govern the arrangement of sectioning and grouping 
elements on the page. Link the ct_about.html file to both of these style sheets now. 


To link an HTML document to a style sheet: 
BD 1. Return to the ct_about.html file in your HTML editor. 
BD 2. Directly before the closing </head> tag, insert the following 1ink elements: 
<link href="ct_base.css" rel="stylesheet" /> 


<link href="ct_layout2.css" rel="stylesheet" /> 


Figure 1-19 highlights the two style sheet links added to the document. 


Figure 1-19 Linking to style sheets 


link elements link 
the web page to 
a style sheet file 


filename of the rel attribute indicates the 
CSS style sheet type of link relationship 


<meta charset="utf-8"| /> 
<meta name="keywords" 
content="Thaj, restaurant,| Charlotte, food" /> 
<title>About Curbside] Thai</title> 
<link href="ct_base.css" rel="stylesheet" /> 
<link href="ct_layout2.css" rel="stylesheet" /> 
</head> 
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BD 3. Save your changes to the file and then reload the ct_about.html file in your 
browser. Figure 1-20 shows the new appearance of the page using the style 
sheets provided by Saija. 


The About Curbside Thai page rendered under a new style sheet 
Curbside Thai 


About Us 


h1 heading text 
displayed in a 
new font style 


tan background with 
drop shadow added 
to page body 


Curbside Thai brings the mch flavor of Thailand to North Carolia Master Chef Saya Adulet. with over 35 years of 


apenience at the House of Ama 


trock 


The: = oot bland vendor food po kaeed wm orce poper boxes! Sample hes acclaumed cumme at our vanous mobile 


lowntown Charloree from 11 2 


citation displayed in 
a light blue font 


straight quotes 
replaced with 
curly quotes 


footer displayed with 
top border and footer 
content centered 


Applying these style sheets displays the page body on a tan background with a drop 
shadow, the font used in the two h1 headings has changed, a top border has been 
added to the footer to set it off from the preceding content, and the citation to the 
Carolina Traveler magazine is displayed in a light blue font. The effect makes the page 
content easier to read and more pleasing to the eye. 

Sajja is concerned that the contact information in the page footer is difficult to read. 
He wants you to add bullet characters (¢) separating the name of the restaurant, the street 
address, and the restaurant phone number. However, this character is not represented by 
any keys on your keyboard. How then, do you insert this symbol into the web page? 


Working with Character Sets and Special 
Characters 


Every character that your browser is capable of rendering belongs to a collection of 
characters and symbols called a character set. The character set used for the English 
alphabet is the American Standard Code for Information Interchange more simply 
known as ASCII. A more extended character set, called Latin-1 or the ISO 8859-1 
character set, supports 255 characters and can be used by most languages that employ 
the Latin alphabet, including English, French, Spanish, and Italian. Unicode, the most 
extended character set, supports up to 65,536 symbols and can be used with any of the 
world’s languages. 


Character Encoding 


TRY TT aren character from a character set is associated with an encoding value that can then 
You can explore different be stored and read by a computer program. For example, the copyright symbol © from 
character encoding the Unicode character set is encoded with the number 169. If you know the encoding 
values using the demo_ value, you can insert the corresponding character directly into your web page using the 


characters.html file in the 


following character encoding reference: 
html01 » demo folder. 


&#Ccode; 
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where code is the encoding reference number. Thus, to display the © symbol in your 
web page, you would enter 


&H#169; 


into your HTML file. 


Character Entity References 


Another way to insert a special symbol is to insert a character entity reference, which 
is a short memorable name used in place of the encoding reference number. Character 
entity references are inserted as 


&char; 


where char is the character's entity reference. The character entity reference for the 
copyright symbol is copy, so to display the © symbol in your web page, you could 
insert the following expression into your HTML code: 


&COpYy; 


In the last session, you learned that HTML will collapse consecutive occurrences of 
white space into a single white-space character. You can force HTML to display extra 
white space by using the following character entity reference 


&énbsp; 


where nbsp stands for nonbreaking space. When you want to display extra white 
space, you need to insert the nonbreaking space character reference in the HTML code 
for each space you want to display. 


REFERENCE 


Inserting Symbols from a Character Set 
© To insert a symbol based on the character encoding reference number, enter 
&# code; 


where code is the character encoding reference number. 
¢ To insert a symbol based on a character entity reference, enter 


&char; 


where char is the name assigned to the character. 
¢ To insert a white-space character, use 


énbsp; 


For the footer in the About Curbside Thai page, use the bullet symbol (¢), which has 
the encoding value 8226, to separate the restaurant name, address, and phone number. 
Use the &nbsp; character reference to insert an extra blank space prior to the postal 
code in the restaurant address. 
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To insert a character encoding reference number and an entity 
reference: 


BD 1. Return to the ct_about.htmll file in your HTML editor. 
Dd 2. 


Figure 1-21 highlights the character codes and references added to the 
footer. 


Figure 1-21 Inserting special characters 


character encoding 
reference for a bullet 
character (¢) 


footer 


Curbside Thai 26; 411 Belde Drive, Charlotte NC Anbsp; 28261 } 764-555-1151 


foote 


Ee entity oe) 


for a nonbreaking space 


BD 3. Save your changes to the file and then reload the ct_about.html file in your 
browser. Confirm that the footer now shows the characters displayed in 


Figure 1-22. 
Figure 1-22 Revised page footer 
Contact us to cater your next party and expenence what alls “the finest Assan food on of off the streets 


of Charlone 


bullet characters 


411 Belde Drive, Charlotte Nt 


extra nonbreaking 
space 


Curbside Tha 28201 
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INSIGHT 


Presentational Attributes 


Early versions of HTML supported presentational elements and presentational attributes 
describing how each element should be rendered by the browser. For example, to 
align text on a page, HTML included the following align attribute 


<element align="alignment">content</element> 


where alignment is either left, right, center, or justify. Thus, to center an h1 
heading on a page, apply the following code: 


<hl align="center">Curbside Thai</h1> 


Almost all presentational elements and attributes are now deprecated in favor 
of style sheets, but you may still see them in the code from older websites. Using a 
deprecated attribute like align would probably not cause your web page to fail, 
however, it’s still best practice to adhere to a standard in which HTML is used only to 
describe the content and structure of the document and style sheets are used to format 
its appearance. 


So far your work on the Curbside Thai page has been limited to textual content. 
Next, you'll explore how to add graphical content to your web page. 


Working with Inline Images 


Most web pages include embedded content, which is content imported from another 
resource, often nontextual, such as graphic images, audio soundtracks, video clips, 
or interactive games. To support this type of content, HTML provides the embedded 
elements listed in Figure 1-23. 


Figure 1-23 HTML embedded elements 


Always include the alt 
attribute; it is required in 
XHTML code and is highly 
recommended as a way 
of accommodating users 
running nonvisual web 
browsers. 


Element Description 

audio Represents a sound clip or audio stream 

canvas Contains programming scripts used to construct bitmap images and graphics 
embed Contains general embedded content including application or interactive content 
iframe Contains the contents of an external web page or Internet resource 

img Contains a graphic image retrieved from an image file 

object Contains general embedded content including application or interactive content 
video Represents a video clip or video stream with captions 


These elements are also known as interactive elements because they allow for 
interaction between the user and the embedded object. For example, embedded audio 
or video content usually contains player buttons to control the playback. 

Images are inserted into a web page using the following img element 


<img src="file" alt="text" /> 


where file is the name of the image file. If the browser cannot display images, the text 
in the alt attribute is used in place of the image. As with other one-sided tags, the img 
element can be entered without the closing slash as 


<img src="file" alt="text"> 
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Images marked with the <img> tag are also known as inline images because they are 
placed, like text-level elements, in line with surrounding content. 

By default, the image size matches the size of the image in the file but you can specify 
a different size by adding the following width and height attributes to the img element 


width="value" height="value" 


where the width and height values are expressed in pixels. If you specify only the 
width, browsers automatically set the height to maintain the proportions of the image; 
similarly, if you define the height, browsers automatically set the width to maintain the 
image proportions. Image sizes can also be set within the document's style sheet. 


Embedding an Inline Image 
¢ To embed an inline image into the document, use 
aie Grac= Miedo” eille=Vicexde” f= 


where file is the name of the graphic image file, and text is text displayed by 
browsers in place of the graphic image. 


REFERENCE 


Sajja has provided you with two images. The image from the ct_logo2.png file 
displays the restaurant logo, while the ct_photo1.png image provides an image of 
customers being served by an employee at his brick-and-mortar restaurant. Sajja 
included this image to emphasize that the food from his food truck is the same quality 
and great taste as the food at his award winning restaurant. Add both of these images to 
the ct_about.html file. 


To insert inline images into a document: 
BD 1. Return to the ct_about.html file in your HTML editor. 
BD 2. Go to the header element and replace the h1 element with the tag 
<img src="ct_logo2.png" alt="Curbside Thai" /> 


3. Go to the article element and, directly after the h1 element, insert the tag 
Include the alt attribute as a 
blank text string if the image 


file does not convey any Figure 1-24 highlights the newly added img elements in the document. 
text message to the user. 


<img src="ct_ photol.png" alt="" /> 


Figure 1-24 Inserting inline images 


header 
<img src="ct_logo2.png" alt="Curbside Thai" /> 
header 


image added to the 
About Us article 


<hl>About Us</hl 
<img src="ct_photol.png" alt=" /> 
p><strong>Curbside Thai</strong> brings the rich flavor of Thailand to 


h1 heading i 


with an inline image 


North Carolina. Master Chef Sajja Adulet, with over 35 
years of experience at the House of Asia, now offers 


that same fine dining to the streets of Charlotte 


with our modern mobile food truck.</5 


BD 4. Save your changes to the file and then reload the ct_about.html file in your 
browser. Figure 1-25 displays the newly added graphic images in the web page. 
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Images on the About Curbside Thai page 


restaurant logo 
used for the 
page header 


About Us 


Curbside Thai brings the nch favors of Thailand to North Carolina 


Master Chef Saya Adulet, with over 35 years of expermence at the House 
of Asia, now offers that same fine dunsng to the sreets of Chaslowe with 


our modem mobile food tuck 


Thas as not bland vendor food packaged um greasy paper boxes! Sample 
he acclaumed comune at our vanoes mobile locahons throughout 
downtown Charlotte from Il am to 7 pm on Monday through 
Thursday. and 11 am. t 11 pm on Friday and Saturday Taste the 


difference’ If you can't get away from your desk Cwurdside Thai u 


ceive 


© Kzenon/Shutterstock.com 


photo floated on the right 
margin of the article 


Trouble? The exact appearance of the text as it flows around the image will 
vary depending on the width of your browser window. 


Note that the photo of the Curbside Thai customers is floated alongside the right margin 
of the article, with the surrounding paragraphs flowing around the image. This is the result 
of code in the style sheets. You’II learn about styles used to float images in Tutorial 3. 


Line Breaks and Other Empty Elements 


The img element is inserted using the empty element tag because it does not enclose 
any text content, but instead links to an external image file. Another important empty 
element is the following br element, which creates a line break 


<br /> 


Line breaks are placed within grouping elements, such a paragraphs or headings, to 
force page content to start on a new line within the group. While useful for controlling 
the flow of text within a group, the br element should not be used as a formatting tool. 
For example, it would not make semantic sense to insert two or more br elements in a 
row if the only reason to do so is to increase the spacing between lines of text. Instead, 
all such formatting choices belong in a style sheet. 

If the text of a line cannot fit within the width of the viewing window, the browser 
will wrap the text automatically at the point the browser identifies as the most 
appropriate. To recommend a different line break point, use the wbr (word break) 
element to indicate where a line break should occur if needed. For example, the 
following HTML code uses the wbr element to break a long web address between 
“com/” and “general”, but this break happens only if the address will not fit on one line. 


www.curbsidethai.com/<wbr />general/docs/ct_about.html 


INSIGHT 
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Finally, another oft-used empty element is the following hr or horizontal rule 
element, which denotes a major topic change within a section 


<hr /> 


Originally, the hr element was used to insert horizontal lines into the page and, 
although that task is better left to style sheets, you will still see the hr element used in 
that capacity in older web pages. 


Supporting HTML 5 with Legacy Browsers 


HTML 5 introduced several new semantic elements including the header, 
footer, article, and nav elements. Some browsers, such as Internet Explorer 
Version 8, could not cope with new elements without an external program known 
as a script running in the browser. 

One script that provides support for HTML 5 is Modernizr (htto://modernizr 
.com); another is HTML 5 Shiv (https://github.com/aFarkas/html5shiv). Many 
HTML editors, such as Dreamweaver, supply their own script files to cope with 
legacy browsers. Note that even with these scripts, the rendering of your page 
under old browsers might not match current browsers. 


Working with Block Quotes and Other 
Elements 


Now that you've written the code for the ct_about.html file, you’ll work on other pages 
in the Curbside Thai website. The ct_reviews.html file provides excerpts of reviews from 
food critics and magazines. Because these excerpts contain extended quotes, you'll 
place each review in the following blockquote element 


<blockquote> 
content 
</blockquote> 


where content is the text of the quote. By default, most browsers render block quotes 
by indenting the quoted material to separate from it from the website author's words, 
however, you can substitute your own style with a custom style sheet. 

Sajja has created much of the code required for the reviews page. The code is 
contained in the two style sheets that are already linked to the reviews page. Complete 
the page by adding the excerpts of the reviews marked as block quotes. 


To create the reviews page: 


Dd 1. Open the ct_reviews_txt.html file from the html01 > tutorial folder in your 
HTML editor. Enter your name and the date in the comment section and 
save the file as ct_reviews.html. 


BD 2. Go to the ct_pages.txt file in your text editor. 


BD 3. Locate the section containing the restaurant reviews and copy the text of the 
two reviews and two awards. 


D 4. Return to the ct_reviews.html file in your HTML editor and paste the text of 
the four reviews directly after the <h1>Reviews</h1> line. 
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BD 5. Enclose each review within a set of <blockquote> tags. Enclose each 
g 
paragraph within each review with a set of <p> tags. Align and indent your 
code to make it easier to read. 


Figure 1-26 highlights the newly added code in the document. 


Figure 1-26 Marking extended text as block quotes 


The culinary art of the food truck vendor has been steadily 
improving 
Antonio's Italian, Organic on the Road, and now Curbside Thai. 


over the last 10 years with fine offerings from 
Sajja Adulet is to be congratulated for offering delicious 
and authentic Thai food at a reasonable price. We think 
Curbside Thai provides the finest Asian food on or off 
the streets of Charlotte. 

Carolina Traveler</; 


Steaming rice with a spicy Asian sauce 1S common street fare 


and we all accept its limitations in exchange for the 
convenience of a quick bite on the run. With Curbside Thai you 


don't have to compromise. Building on his experience as a 


blockquote elements j 
fine establishments on the East Coast, 


within the page body master chef at several 
Sajja Adulet has brought the taste of fine dining to the 


Food Cart Wars and we couldn't be nappier. a) 
Food Cart Review ; 
] iot 


, within each 
Best in Show (Asian) 


Food Cart Cook-off 


block quote 
are paragraphs 


Ww 
ckquote 
First Prize (Vendor 
Vendy Awards 


D 6. Save your changes to the file and then open the ct_reviews.html file in your 
browser. Figure 1-27 shows the appearance of the restaurant review quotes 
using Sajja’s style sheet. 
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Figure 1-27 Block quotes of restaurant reviews 


Reviews open quotes are oa) 


by the style sheet 


The culinary art of the food truck vendor 


off the streets of Charlotte 
block quotes 
4 Carolma Traveler 


paragraphs within 
the block quote 


Because of the styles in Sajja’s style sheets, each blockquote element appears 
within its own formatted box with an opening quote character added to reinforce the 
fact that this is quoted material. 

The next page you'll create contains information about catering from Curbside Thai. 
The structure of this page is identical to the structure of the About Curbside Thai page. 
Sajja has linked the catering page to two style sheets containing the style rules that 
dictate how the page will look when the page is rendered in a browser. 


To create the Catering page: 


BD 1. Open the ct_catering_txt.html file from the html01 > tutorial folder in your 
HTML editor. Enter your name and the date in the comment section and 
save the file as ct_catering.html. 


D 2. Return to the ct_pages.txt file in your text editor. 


BD 3. Locate the section containing information about Curbside Thai's catering 
service and copy the four paragraphs of information. 


D 4. Return to the ct_catering.html file in your HTML editor and paste the copied 
text directly after the <h1>Catering</h1> line. 


BD 5. Mark each paragraph in the article using the p element. Align and indent 
your code to make it easier to read. 


D 6. Directly after the <h1>catering</h1> tag, insert an inline image using 
ct_photo2.png as the source and an empty text string for the alt attribute. 


Figure 1-28 highlights the newly added paragraphs in the document. 
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Entering the markup for the Catering page 


<article 


hleCatering</hi 


(inline image }——> ve src="ct_photo2.png" alt="" /> 
<p>Since 2016 Curbside Thai has provided top-class catering for weddings 


paragraphs — 


and special events. We cover Charlotte and large regions of North 
Carolina with our mobile food truck, built specially for catering big 
events. </p> 

<p>Meals are cooked up hot and on the spot at your venue. We have an 
experienced uniformed catering crew providing professional service for 
events ranging from 50 to 368. We will provide the plates, linens, 
glassware and other dining items, upon request.</p> 

<p-Curbside Thai is licensed to do full bar service catering with a wide 
range of spirits, beer, and wine! Ask us about a custom drink menu 

for your wedding or private event. We also can provide an array of 
great specialty Asian teas and drinks.</p> 

<p>Impress your friends and co-workers with a Curbside Thai-catered 
event! </p> 


farticle> 


. Save your changes to the file and then open the ct_catering.html file in your 
browser. Figure 1-29 shows the appearance of the page. 


Figure 1-29 Content of the Catering page 


Catering 


inline image 


Since 2010 Curbside Thai has provided top-class catering for weddings ‘ = 
and special events. We cover Charlotte and large regions of North : es [ 
Carolina with our mobile food truck, built specially for catering big % ‘ 4 ( 
events. = pita € 
- uM 7 
Meals are cooked np hot and on the spot at your venue. We have an / AP a“... 
experienced. uniformed catering crew providing professional service for 5 “ — 
paragraphs events ranging from 50 to 300. We will provide the plates. linens. . 
glassware and other dining items, upon request ~ 
Curbside Thai is licensed to do full bar service catering with a wide range of spirits. beer. and wine! Ask us about a custom 
drink menu for your wedding or private event. We also can provide an array of great specialty Asian teas and drinks. 
Impress your friends and co-workers with a Curbside Thai-catered event! 


RojaninSri/Shutterstock.com 


The final page you'll create in this session will contain contact information for 
Curbside Thai. Mark the content within the main page article. 


To create the Contact Us page: 


BD 1. Open the ct_contact_txt.html file from the html01 > tutorial folder in your 


HTML editor. Enter your name and the date in the comment section and 
save the file as ct_contact.html. Note that this page is linked to two style 
sheets that Sajja created. 


BD 2. Go to the ct_pages.txt file in your text editor. 


» 3. Copy the Contact Us section in the text file (excluding the title). 
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D 4. Return to the ct_contact.html file in your HTML editor and paste the copied 
text directly after the <h1>Contact Us</h1> tag. 


BD 5. Enclose the introductory paragraph within a set of opening and closing <p> 
tags to mark it as a paragraph. 


D 6. Enclose the three lines containing the street address within a set of opening 
and closing <address> tags to mark that content as an address. Insert the 
<br /> tag at the end of the first two lines to create a line break between the 
name of the restaurant and the street address. 


BD 7. Mark each of the last two lines as paragraphs using the p element. 


Figure 1-30 highlights the marked up code for Curbside Thai’s contact 
information. 


Figure 1-30 Entering the markup for the Contact Us page 


<article> 

<hi>Contact Us</h1> 

<p>Contact Curbside Thai for your next event or just to find 
out when our mobile truck will next be in your area. 
Employment opportunities available now!</p> 


<address> ; 
wiv racera erment Curbside Thai<br /> line breaks to start the 
to mark up a 411 Belde Drive<br /> next part of the address 
mailing address Charlotte NC 28201 promenilins 
</address> 


<p>Call: (704) 555-1151</p> 
<p>Email: curbside.thai@example.com </p> 
</article> 


D 8. Save your changes to the file and then open the ct_contact.html file in your 
browser as shown in Figure 1-31. 


Figure 1-31 Content of the Contact Us page 


Contact Us 


street address 
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The Contact Us page only provides the text of the contact information but that text is 
static. In the next session, you'll learn how to make this content interactive by turning 
the contact information into hypertext. 


G, 


2 


Problem Solving: Making your Page Accessible with ARIA 


The web is for everyone and that presents a special challenge when writing code for 
the visually impaired who will be accessing your website with a screen reader. One 
standard to assist screen readers is Accessible Rich Internet Applications (ARIA), which 
supplements HTML elements with additional attributes that provide clues as to the 
element's purpose as well as provide information on the current status of every page 
element. 

One of the cornerstones of ARIA is the role attribute, which specifies the purpose of 
a given element. For example, the following role attribute indicates that the header 
element contains a banner, such as a logo that introduces the web page 


PROSKILLS , 


<header role="banner"> 
content 
</header> 


ARIA supports a list of approved role names including the following: 


© alert Content with important and usually time-sensitive information 

¢ application A web application, as opposed to a web document 

° definition A definition term or concept 

° dialog An application window that will require user input 

° log A region of data that is constantly modified and updated 

® progress bar Content that displays the progress status for ongoing tasks 

© search Content that provides search capability to the user 

° separator A divider that separates one region of content from another 

° timer A region that contains a numerical counter reporting on elapsed time 


You can view the complete list of role attribute values and how to apply them at 
www.w3.org/WAI/PF/aria/roles. 

ARIA is a useful tool for enhancing the accessibility of your web page and making 
the rich resource that is the World Wide Web open to all. A side benefit is that 
accessibility and usability go hand-in-hand. A website that is highly accessible is also 
highly usable and that is of value to all users. 


In the next session, you'll continue to work on the Curbside Thai website by adding 
pages describing the restaurant menu and listing the time and locations where the 
mobile food truck is parked. 
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" Session 1.2 Quick Check 


1. Which of the following marks a heading with the second level of importance? 
a. <h level="2"sGourmet Thai Cooking</h> 
b. <hLevel2>Gourmet Thai Cooking</hLevel2> 
Cc. <heading2>Gourmet Thai Cooking</heading2> 
d. <h2>Gourmet Thai Cooking</h2> 
2. Prior to HTML 5, sections were identified with: 
a. the section element and the name attribute 
b. the div element and the id attribute 
c. the article element and the section attribute 
d. the aside element and the id attribute 
3. To mark content that is related to the main article, use 
a. the sidebar element 
b. the extraContent element 
c. the aside element 
d. the section element 
4. Which of the following marks the content as emphasized text? 
a. <i>Daily Special</i> 


REVIEW 


b. <emsDaily Special</em> 
Cc. <strong>Daily Special</strong> 
d. <b>Daily Special</b> 
5. Which of the following should be used to mark the text string “H,SO,,”? 
a. H<lower>2</lower>SO<lower>4</lower> 
b. H<sup>2</sup>SO<sup>4</sup> 
C. H<code>2</code>S0<code>4</code> 
d. H<sub>2</sub>SO<sub>4</sub> 
6. Which of the following links the HTML file to the CSS style sheet file, 
mystyles.css? 
a. <stylesheet rel=link">mystyles.css</mystyles> 
b. <stylesheet src="mystyles.css" /> 
c. <link rel="stylesheet ">mystyles.css</link> 
d. <link href="mystyles.css" rel="stylesheet" /> 
7. Which of the following tags might be used to indicate a change of topic within 
a section? 
a. <hr /> 
b. <br /> 
Cc. <aside /> 


d. <img /> 
8. Which character reference is used to insert a nonbreaking space within a text 
string? 
a. &Space; 
b. &nbsp; 
Cc. &ws; 
d. «copy; 


9. Which of the following tags inserts an inline image with the alternative text “Art 
World”? 
a. <image src="awlogo.png" alt="Art World" /> 
b. <img src="awlogo.png">Art World</img> 
c. <figure src="awlogo.png" alt="Art World" /> 
d. <img src="awlogo.png" alt="Art World" /> 
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Session 1.3 Visual Overview: 


The href attribute 
provides the URL of the 


linked file (ct_start.html). 


The <a> tag marks 
content as a hypertext 
link to an external 


resource. 


The <nav> tag marks 
a list of hypertext links 
used for navigation. 


The tel scheme is used 
to provide the URL for 
a telephone link. 


6 href="ct_start.html"><img src="ct_lLogo2.png’ alt=" bs ide 
1av 
1 
l ah About ’ 
l ah Locati« s] l 
1 a wi</a | 
l a hre Reviews</a 
li><a href atering</a></1 
l a ef ri itact a | 
it 
cre Each list item 
fheade E 
, is marked as a 
article hypertext link. 
hl>Contact Us</hl 


<p>Contact Curbside Thai for your next event or just to find 


out when our mobile truck will next be in your area. 


Employment opportunities available now! </p> 


address>Curbside Thai<br 
411 Belde Drive<br 


Charlotte NC 28201 


<p>Call: <a hrefe"tel:+17045551151">(784) 555-1151</a></p> 
<p>Email: <a href="mailto: ide 
<c/article 


irds thai om" >curbside, 


The URL points to 
an email address. 


Qexamp Le. ¢ 


The mailto scheme is 
used to provide the 
URL for an email link. 


The <ul> tag marks 
an unordered list with 
the <li> tag marking 
each list item. 


thaiGexamp le. com</a>< 


ip> 
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Lists and Hypertext Links 


Clicking the logo 
jumps the user to 
the ct_start.html file. 


About | Locations | Menu | Reviews Catering Contact 


Contact Us 


Contact Curbside Tha: for your acxi event or yust to find/out when our mobile truck wall neat be m your areca. Employment 


opportunitees available now! 


The navigation list 


encloses links to pages in 


ere the Curbside Thai website. 


411 Belde Drive 
Charlotte NC 28201 


The telephone link opens 
a telephony application 
when clicked. 


Call, (704) 555-1151 


Email curbside tha: @example com 


Curbside Thai « 411 Belde Drive, Charlotte NC 28201 « 704-555-1151 


The email link opens 
an email program 
when clicked. 
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Working with Lists 


In the last session, you added order and structure to your web page with some of 
HTML's sectioning and grouping elements. Another type of grouping element is a list. 
HTML supports three types of lists: ordered lists, unordered lists, and description lists. 


Ordered Lists 


Ordered lists are used for items that follow some defined sequential order, such as 
items arranged alphabetically or numerically. An ordered list is marked using the ol 
(ordered list) element with each list item marked using the 11 element. The general 
structure is 


<ol> 
<lis>itemi</li> 
<lisitem2</li> 


</ol> 
where item1, item2, and so forth are the items in the list. For example, the following 
ordered list ranks the top-three most populated states: 


<ol> 
<li>California</li> 
<li>Texas</li> 
<li>New York</1li> 
</ol> 


By default, browsers display list items alongside a numeric marker. In the case of 
ordered lists, this is a numeric value starting with the number 1 and ascending in value. 
For example, the ordered list of states would be rendered in most browsers as 


1. California 
2. Texas 
3. New York 


Note that because both the o1 and 1i elements are considered grouping elements, 
each list item will appear, by default, on a new line in the document. 

To display different numbering, use the start and reversed attributes of the o1 
element. The start attribute provides the numeric value for the first item in the list, 
while the reversed attribute specifies that the list numbers should be displayed in 
descending order. Thus, the following HTML code that lists the most populated states 


<ol reversed start="50"s 
<li>California</li> 
<li>Texas</li> 
<li>New York</1li> 
</ol> 


would be rendered as a list in descending order starting from 50 
50. California 


49. Texas 
48. New York 
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You can explicitly define the item value by adding the value attribute to each list 
item. The list shown previously could also have been generated with the following 
code: 


<ol> 
<li value="50"sCalifornia</li> 
<li value="49"sTexas</li> 
<li value="48"sNew York</1li> 
</ol> 


You can use style sheets to display lists using alphabetical markers (A, B, C, ...) or 
Roman Numerals (1, Il, Ill, ...) in place of numeric values. You'll explore this technique 
in Tutorial 2. 


Unordered Lists 


Unordered lists are lists in which the items have no sequential order. The structure for 
an unordered list is similar to that used with ordered lists except that the list items are 
grouped within the following ul (unordered list) element: 


<ul> 
<lisitemi</li> 
<lisitem2</li> 


</ul> 
For example, the following HTML code creates an ordered list of all of the states 
along the Pacific coast: 


<ul> 
<li>California</li> 
<li>Oregon</1li> 
<li>Washington</1li> 
</ul> 


By default, browsers display items from an unordered list alongside a marker such as 
a bullet point. Thus, an unordered list of Pacific coast states might be rendered as 


¢ California 
e Oregon 
¢ Washington 


Once again, the exact appearance of an unordered list will depend on the style sheet 
that is applied to the element. 
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Creating a Nested List 


Because the 1i element is itself a grouping element, it can be used to create a series 
of nested lists. The general structure for a nested collection of unordered list is 


<i> 
<lis>Item 1</li> 
<li>Item 2 
<ul> 
<li>Sub Item 1</li> 
<li>Sub Item 2</li> 
</ul> 
yale 
</ul> 


= 
pe 
oO 
= 
2) 
Zz 
= 


where Sub Item 1, Sub Item 2, and so forth are items contained within the Item 2 
list. For example, an unordered list of states and cities within those states could be 
marked up as 


<ul> 
<li>California</li> 
<li>Oregon 
evils 
<li>Portland</li> 
<li>Salem</1li> 
</ul> 
</ e 
<li>Washington</li> 
</ul> 


Most browsers will differentiate the various levels by increasing the indentation and 
using a different list symbol at each level of nested lists, for example, rendering the 
HTML code above as 


© California 

e Oregon 
o Portland 
o Salem 

¢ Washington 


The markers used at each level and the amount of indentation applied to each nested 
list is determined by style sheets, either those built into the browser or those supplied 
by the page designer. You'll explore this technique in Tutorial 2. 
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Description Lists 


A third type of list is the description list containing a list of terms and matching 
descriptions. The description list is grouped by the al (description list) element, 
the terms are marked with the dt (description term) element, and the description(s) 
associated with each term is marked by the dda element. The general structure is 


<dl> 
<dt>terml</dt> 
<dd>descriptionl</dd> 
<dt>term2</dt> 
<dd>description2a</dd> 
<dd>description2b</dd> 


</dl> 


where termi, term2, and so forth are the terms in the list, and description1, 
description2a, description2b, and so forth are the descriptions associated with the 
terms. Note that descriptions must always directly follow the term they describe and 
that more than one description may be provided with each term. 

By default, most browsers indent the descriptions associated with each term. 
Markers are rarely displayed alongside either the description term or the description. 

Sajja wants to use a description list in a page that displays some of the menu items 
sold by Curbside Thai. He’s already started work on the HTML code but needs you to 
complete it by adding the markup for the description list. 


To complete the menu page: 


BD 1. Open the ct_menu_txt.html file from the htmI01 » tutorial folder in your 
HTML editor. Enter your name and the date in the comment section and 
save the file as ct_menu.html. 


D 2. Open the ct_pages.txt file in your text editor if it is not already open and 
copy the five menu items listed in the Mobile Menu section. 


D 3. Return to the ct_menu.html file in your HTML editor and paste the copied 
text directly after the <hl>Mobile Menu</h1> tag. 


BD 4. Enclose the entire menu within an opening and closing <d1> tag. 


BD 5. Mark the name of each menu item using the dt element. Mark the 
corresponding description using the da element. Indent your code to make it 
easier to read and interpret. 


Figure 1-32 shows the completed code for the description list of the mobile 
menu. 
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Figure 1-32 Marking the restaurant menu as a description list 


the name of each menu item is 
marked as a description term; 
information about the item is 
marked as a description 


ticle 

hl>Mobile Menu hl 

il 
Basil Beef Sesame Salad</dt 

id>Spicy Angus beef and sweet basil on top of fresh spring mix, 


red cabbage, carrot, cucumber and tomatoes; served with 


sesame vinaigrette ($9.95 id 

it>Curbside Rice it 

id>Stir-fried rice with onions, red bell peppers, peas and 
carrots, garnished with red « abbage, cucumbers, s< all 1oMns, 
and fried garlic ($6.50); add chicken ($8.50 
or shrimp $9.56 

iteGarlic Pepper Pork it 

dd»Marinated pork stir-fried with fresh garlic and pepper; 

description list served with steamed Jasmine rice, red cabbage, carrot, 

cucumbers, scallions, and fried garlic ($8.50)</dd 

it>Pad Thai it 

id>Stir-fried rice noodles with bean sprouts and chives, 
gar nished with red cabbage, carrot, 
scallions, lime, and crushed peanuts (57.56 
add chicken ($8.56) or shrimp ($9.56 j 

it>Thai Red Curry at 

id>Traditional red curry sauce cooked in yconut milk with 


bamboo shoots, fresh basil, Lime, and Thai chili and 
* add 


served on a bed of steamed Jasmine rice ($7.58 


chicken ($8.56) or shrimp ($9.50 id 


D 6. Save your changes to the file and then open the ct_menu.html file in your 
browser. Figure 1-33 shows the completed menu for Curbside Thai. 
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Curbside Thai menu as a description list 


Mobile Menu term description 
of the term 
Basil Beef Sesame Salad 


Spicy Angus beef and sweet basil on top of fresh spring mix, red cabbage, ¢« 


and tomatoes: served with sesame vinaigrette ($9.9 


Curbside Rice 
Stir-fried nce with onions, red bell peppers, peas and carrots, garnished with red cabbage 


cucumbers. allions, and fried garlic ($6.50), add chicken ($8.50) of shrimp ($9.5 


Garlic Pepper Pork 


nah - Marinated pork stir—fried with fresh garlic and pepper, served with steamed Jasmine rice, red 
description list Pept a 
ibbage, carrot, cucumbers, scallions, and fried garlic ($8.50 


Pad Thai 
Stir-fried nce noodles with bean sprouts and chives, garnished with red cabbage, carrot 


scallions, lime, and crushed peanuts ($7.50), add chicken ($& )) or shrimp ($9 


Thai Red Curry 
Traditional red curry sauce cooked in coconut milk with bamtbx shoots, fresh basil, lime, and 
Thai chili and served on a bed of steamed Jasmine rice ($7.50), add chicken ($86.50) or shrimp 


($9 


Note that the style sheet that Sajja uses for his website inserts a dividing line 
between each term and description in the list. This is not the default browser style for 
description lists. 

Description lists can be used with any general list that pairs one list of items with 
another list providing additional information. For example, Sajja has a page that lists 
the times and locations at which the Curbside Thai truck will make an appearance. 
Complete this page by enclosing the content within a description list, marking the times 
as the list “terms” and the locations as the list “descriptions”. 


To create a page of times and locations: 


Dd 1. Open the ct_locations_txt.html file from the html01 > tutorial folder in your 
HTML editor. Enter your name and the date in the comment section and 
save the file as ct_locations.html. 


D 2. Return to the ct_pages.txt file in your text editor and copy the four locations 
from the Today’s Locations section. 


D 3. Return to the ct_locations.html file in your HTML editor and paste the 
copied text directly after the <hl>Today’s Locations</h1> tag. 


D 4. Mark the entire list of times and locations using the d1 element. Mark each 
time using the dt element and each location using the dd element. Indent 
your code to make it easier to read and interpret. 


D5. In order to distinguish this description list from other description lists in the 
website, add the attribute id="ct_locations" to the opening <dl> tag. 


D 6. Sajja has a map that he wants displayed alongside the list of times and 
locations. Directly after the h1 element within the article element, insert 
the following inline image: 


<img src="ct_map.png" alt="" /> 
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Figure 1-34 highlights the newly added code for the Today's Locations page. 


Figure 1-34 Creating a description list 


article> 


inline image 
showing map 
of location 


description list 


</dl> 


J/article> 


hl>Today's Locations</h1 
<img ysrc="ct_map.png" alt=""_ /> 
<dl id="ct_locations"> 
<dt>1l a.m. to 2 p.m,.</dt> 
<dd>265 West 3rd Street, Charlotte</dd> 
<dt>2 p.m. to 4 p.m.</dt> 
<dd>443 West 2nd Street, Charlotte</dd> 
<dt>4 p.m. to 8 p.m.</dt> 
<dd>900 South Mint Street, Charlotte</dd> 
<dt>8 p.m. to 11 p.m.</dt> 
<dd>168 North Church Street, Charlotte</dd> 


id 


identifies this 
description list 


attribute uniquely 


each time interval marked 
as a description term; each 
location marked as a 
description 


BD 7. Save your changes to the file and then open the ct_locations.html file in 
your browser. Figure 1-35 shows the appearance of the page. Remember, 
the placement of items on the screen is a result of the style sheets. 


Figure 1-35 Locations of the Curbside Thai food truck 


Today's Locations 


(term) |, a.m. to 2 p.m. 


205 West 3rd Street, Charlotte 


2 p.m. to 4 p.m 


description 443 West 2nd Street, Charlotte 


4p.m. to 8 p.m 
900 South Mint Street, Charlotte 


8 p.m. to Tl p.m. 
168 North Church Street, Charlotte 


inline image showing 
mobile truck locations 


description 
list 


a4 


. * 9, 
* 


From this page, Curbside Thai customers can quickly find the mobile truck. A page 
like this will have to be updated, probably daily, as the truck moves around. This 
is often better accomplished using database programs on the web server that will 
generate code for both the HTML and the inline image file. 


INSIGHT 
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Marking Dates and Times 


The adage that nothing ever quite disappears on the Internet also means that the 
web is populated with old articles, documents, and news stories that are no longer 
relevant or perhaps, even accurate. Any content you publish to the web should be 
time-stamped to document its history. One way of marking a date-time value is with 
the following time element 


<time datetime="value">content</time> 


where value is the date and time associated with the enclosed content. Dates should 
be entered in the yyyy-mm-dd format, where yyyy is the four-digit year value, mm is 
the two-digit month value, and dd is the two-digit day value. Times should be entered 
in the hh: mm format for the two-digit hour and minute values entered in 24-hour time. 
To combine both dates and times, enter the date and time values separated by a 
space or the letter T as in the following code: 


<footer>Last updated at: 

<time datetime="2021-03-01T14:52">March 1 2021 at 2:52 
p.m.</time> 
</footer> 


For international applications, you can base your time values on the common 
standard of Greenwich Mean Time. For example, the following code includes the 
information that the time is based on the Eastern time zone, which is 5 hours behind 
Greenwich Mean Time: 


<p>Webinar starts at: 

<time datetime="2021-03-10T20:30-05:00">3:30 p.m. 
(EST) </times 
</p> 


While the value of the datetime attribute is not visible to users, it is readable by 
machines such as search engines, which can include the date and time in reporting 
search results. You can read more about the time element on the W3C website, 
including information on marking a time duration between two events. 


You've now created six web pages for the Curbside Thai website. Next, you'll link 
these pages together so that users can easily navigate between the pages in the website. 
You'll start by creating a navigation list. 


Navigation Lists 


A navigation list is an unordered list of hypertext links placed within the nav element. 
The general structure is 


<nav> 
<ul> 
<li>link1</li> 
<li>link2</li> 


</ul> 
</nav> 


where link1, link2, and so forth are hypertext links. While hypertext links can be 
placed anywhere within the page, having a central list of links makes the website easier 
to work with and navigate. 
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Add this structure to the About Curbside Thai web page, creating entries for each of 
the six web pages you created in this tutorial. 


To create a navigation list: 
D 1. Open the ct_about.html file in your HTML editor if it is not already open. 


BD 2. Go to the body header and, directly below the inline image for the Curbside 
Thai logo, insert the following navigation list: 


<nav> 
<ul> 
<li>About</1i> 
<li>Locations</1li> 
<li>Menu</1i> 
<li>Reviews</li> 
<li>Catering</1li> 
<li>Contact</li> 
</ul> 
</nav> 


Figure 1-36 highlights the structure of the navigation list. 


Figure 1-36 Creating a navigation list 


<body> 
<header> 
<img src="ct_logo2.png" alt="Curbside Thai" /> 
<nav> 
<ul> 
<li>About</1li> 
<li>Locations</1li> 
navigation list section <1i>Menu</1i> unordered list 
eee ee the nav 2143 RSWAewSe AS sl nav 
<1li>Catering</li> 
<li>Contact</li> 
</ul> 
</nav> 
</header> 


D 3. Save your changes to the file and then reopen the ct_about.html file in your 
browser. 
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Figure 1-37 shows appearance of the navigation list. 


Navigation list for the Curbside Thai website 


layout of the 
navigation list 


based on Sajja’s 
style sheet 


Locations | Menu 


items within the 
navigation list 


Curbside Thai brings the meh favor of Thailand to North Carohna 
Master Chef Sayja Adulet. wath over 35 years of experience at the Howse 
of Awa sow offers that came fine ding to the etreets of Charlotte with 
our modern mobile food truck 

This 25 not bland vendor food packaged m greasy paper boxes’ Samplic 
hus acclamned cucsme at ou vanous mobile locations throughout 
downtown Chaslone fom 1] am w 7 pm on Monday through 
Thursday, and 11 am. to 11 pm on Friday and Sesurday. Taste the 
difference! If you can't get away from your desk Curbride That « 


Gain 


© Kzenon/Shutterstock.com 


Note that the appearance of the navigation list in the ct_about.html file is based on 
styles in Sajja’s style sheets. Navigation lists can be displayed in a wide variety of ways 
depending on the styles being employed and the same navigation list might be laid out 
horizontally for desktop devices and vertically for mobile devices. You'll learn more 
about how to format navigation lists in Tutorial 5. 

Now that you’ve created the structure of the navigation list, mark the list items as 
hypertext links. 


Working with Hypertext Links 


Hypertext is created by enclosing content within a set of opening and closing <a> tags 
in the following structure 


<a href="url">content</a> 


Keep your filenames where url is the Uniform Resource Locator (URL), which is a standard address format 
short and descriptive so used to link to a variety of resources including documents, email addresses, telephone 
that users are less apt to numbers, and text messaging services, and content is the document content marked 
make e oelng eee as a link. When linking to another HTML file in the same folder, the URL is simply 
accessing your website. ; : : 
the name of the file. For example, a hypertext link to the ct_menu.html file would be 
marked as 


<a href="ct_menu.html">Menu</a> 


When the user clicks or touches the word Menu, the browser will load the ct_menu.html 
file in the browser. Note that filenames are case sensitive on some web servers so that 
those servers differentiate between files named ct_menu.html and CT_Menu.html. The 
standard for all web filenames is to always use lowercase letters and to avoid using 
special characters and blank spaces. 

The default browser style is to underline hypertext links and to display those links 
in a different text color if the user has previously visited the page. However, page 
designers can substitute different hypertext link styles from their own style sheets. We'll 
explore this technique in Tutorial 2. 
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Marking a Hypertext Link 
¢ To mark content as a hypertext link, use 
<a href="url">content</a> 


where url is the address of the linked document, and content is the document 
content that is being marked as a link. 
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Mark the six entries in the navigation list, pointing each entry to the corresponding 
Curbside Thai page. 


To create hypertext links: 
D 1. Return to the ct_about.html file in your HTML editor. 


D2. Mark the first entry as a hypertext link pointing to ct_about.html file by 
changing the list item to 


<a href="ct_about.html">About</a> 


BD 3. Change the code of the second list item to 


<a href="ct_locations.html">Locations</a> 


BD 4. Continuing in the same fashion, change the Menu entry to a link pointing to 
the ct_menu.html file, the Reviews entry to a link pointing to the ct_reviews. 
html file, the Catering entry to a link pointing to the et_catering.html file, 
and the Contact entry to a link pointing to the ct_contact.html file. 


Figure 1-38 highlights the newly added code that changes all of the items in 
the navigation list to hypertext links. 


each item in the 
navigation list is marked 
as a hypertext link 


<nav> 

<ul> 
<li><a href="ct_about.htmL">About</a></li> 
<li><a href="ct_locations.html">Locations</a></1li> 
<li><a href="ct_menu.html">Menu< /a></1i> 
<li><a href="ct_reviews.htmL">Reviews</a></li> 
<li><a href="ct_catering.htmL">Catering</a></1li> 
<li><a href="ct_contact.htmLl">Contact</a></li> 

< Jul > 


o> 


D 5. Save your changes to the file and then reopen the ct_about.html file in your 
browser. 


D6. Click each of the six navigation list entries and verify that the browser loads 
the corresponding web page. Use the Back button on your browser to return 
to the About Curbside Thai page after you view each document. 
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Trouble? If the links do not work, be sure your code matches Figure 1-38. 
For example, check the spelling of each filename in the href attribute of each 
<a> tag to ensure it matches the filename of the corresponding Curbside 
Thai web page and check to be sure you have all needed opening and 
closing tags. 


You may have noticed that when your mouse pointer moved over a hypertext link 
in the navigation list, the appearance of the link changed to white text on a black 
background. This is an example of a rollover effect, which is used to provide visual 
clues that the text is hypertext rather than normal text. You'll learn how to create 
rollover effects in Tutorial 2. 


Turning an Inline Image into a Link 


Inline images can also be turned into links by enclosing the image within opening and 
closing <a> tags. Turn the Curbside Thai logo into a hyperlink that points to the Startup 
page you opened in the first session. 


To mark an image as a hypertext link: 
BD 1. Return to the ct_about.html file in your HTML editor. 


D2. Mark the image in the body header as a hyperlink by changing the HTML 
code for the inline image to 


<a href="ct_start.html"><img src="ct_logo2.png" 
alt="Curbside Thai" /></a> 


Figure 1-39 highlights the code to change the logo image to a hypertext link. 
Marking an inline image as a hypertext link 


reference to the body 
hypertext link heade Y 
> src="ct_logo2.png” alt="Curbside T 


<a href="ct_start. html">< img 


hai" <fa> 


BD 3. Save your changes to the file and then reopen the ct_about.html file in your 
browser. 


D4. Click the Curbside Thai logo and verify that the browser opens the Curbside 
Thai Startup page. Click the Back button to return to the About Curbside 
Thai page. 


Sajja wants to be able to jump to any document in the Curbside Thai website from 
any page. He asks you to copy the hypertext links, including the image hyperlink, you 
just created in the ct_about.html file to the other documents in the website. 
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To copy and paste the hypertext links: 
BD 1. Return to the ct_about.html file in your HTML editor. 


D 2. Copy the entire content of the page header from the opening <header> tag 
through to the closing </header> tag, including the revised code for the 
company logo and navigation list. 


D 3. Go to the ct_locations.html file in your HTML editor. Paste the copied 
HTML code, replacing the previous page header in this document. Save your 
changes to the file. 


ae || a 4. Repeat the previous step for the ct_menu.html, ct_reviews.html, 


VOuIGET WEYL ct_catering.html, and ct_contact.html files, replacing the body header in 
websites a uniform design each of those documents with the revised header from ct_about.html. Save 
by including the same your changes to each file. 

navigation list on each 2 Pee . 

page so that users can D 5. Reopen the ct_locations.html file in your browser and verify that you can 
easily move from one page jump from one page to another by clicking items in the navigation list at the 
to the next. 


top of each page. Also verify that you can jump to the Startup page at any 
time by clicking the Curbside Thai logo. 


Specifying the Folder Path 


In the links you created, the browser assumed that the linked files were in the same 
folder as the current page. However, large websites containing hundreds of documents 
often place documents in separate folders to make them easier to manage. 

Figure 1-40 shows a preview of how Sajja might organize his files as the Curbside 
Thai website increases in size and complexity. In this structure, all folders start from 
a root folder named thai that contains the site’s home page, which Sajja has stored 
in the index.html file. Sajja has moved all of his images and CSS style sheet files into 
their own folders. He has divided the rest of the web pages among three subfolders: 
the general folder for pages containing general information about the restaurant, the 
mobile folder for pages with content specifically about the mobile food service, and the 
catering folder for pages describing Curbside Thai’s catering opportunities. 


Figure 1-40 A sample folder structure 


thai docs general 
= = 
= =] ct_about.html = ct_reviews.html 
=] =; = 
index.html =I ct_contact.html 
imgs mobile 
—a 
= ct_locations.html 
— — = 
= ct_menut.html 
css catering 
—s 
= ct_catering.html 
a — — 
=> ct_menu2.html 
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To create links between files in separate folders, you must provide a path to the 
linked file. HTML supports two kinds of paths: absolute and relative. 


Absolute Paths 


An absolute path is a path that starts from the root folder and processes down the entire 
folder structure described with the expression 


/folderi/folder2/folder3/file 


where folderi is the root folder, followed by the subfolders folder2, folder3, and 
so forth, down to the linked file. Based on the structure shown previously in Figure 
1-40, an absolute path pointing to the ct_catering.html file would be 


/thai/docs/catering/ct_catering.html 


If files are located on different drives as well as in different folders, you must include 
the drive letter in the path with the expression 


/drive|/folder1/folder2/folder3/file 


where drive is the letter assigned to the drive. Note that the drive letter must be 
followed by the | character. Thus, if the ct_catering.html file were located on drive E, 
the absolute path that includes the drive would have the expression 


/E|/thai/docs/catering/ct_catering.html 


Note that you don’t have to include a drive letter if the linked document is located on 
the same drive as the current file. 


Relative Paths 


When many folders and subfolders are involved, absolute path expression can quickly 
become long and cumbersome to work with. For this reason, most web designers prefer 
relative paths in which the path is expressed relative to the location of the current 
document. If the current document and linked file are in the same folder, there is no 
path and you need only include the filename. If the linked file is in a subfolder of 

the current document, the path includes all of the subfolder names starting from the 
location of the current page using the expression 


folder1/folder2/folder3/file 


where folder1, folder2, folder3, and so forth are subfolders of the current 
document. The relative path to the ct_about.html file starting from the index.html file is 


docs/general/ct_about.html 


Note that relative paths are often expressed in terms of familial relationships such 
as parent, child, descendant, sibling, and so forth in order to indicate the hierarchical 
nature of the folder structure. Relative paths can also go up the hierarchy to parent 
folders by including the symbol (..), which means “go up one level.” Thus, to go from 
ct_about.html in the general folder up two levels to the index.html file, enter the 
expression 


../../index.html 


Finally, to go sideways in the folder structure by going to a file in a different folder but 
on the same level, you go up to the parent folder and then back down to a different child 
siveneteldsausiid folder. To go from the ct_about.html file in the general folder to the ct_locations.html 
single period (.) character. file in the mobile folder, use the relative path expression 


You can reference the 


../mobile/ct_locations.html 


In this expression, the link goes up to the parent folder docs through the use of the . . 
reference and then back down through the mobile folder to ct_locations.html. 


yay =HTML5 and 
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You should almost always use relative paths in your links. If you have to move your 
files to a different computer or server, you can move the entire folder structure without 
having to edit the relative paths you’ve created. If you use absolute paths, you will have 
to revise each link to reflect the new location of the folder tree on the new device. 


Setting the Base Path 


A browser resolves relative paths based on the location of the current document. You 
define a different starting point for relative paths by adding the following base element 
to the document head 


<base href="url" /> 


where url is the location that you want the browser to use when resolving relative 
paths in the current document. The base element is useful when a single document 
from the website is moved to a new folder. Rather than rewriting all of the relative paths 
to reflect the document's new location, the base element can point to the document's 
old location allowing relative paths to work as before. 


Decision Making: Managing Your Website 


Websites can quickly grow to dozens or hundreds of pages. As the size of a site 
increases, it becomes more difficult to get a clear picture of the site’s structure and 
content. Imagine deleting or moving a file in a website that contains dozens of folders 
and hundreds of files. Could you easily project the effect of this change? Would all of 
your hypertext links still work after you moved or deleted the file? 

To effectively manage a website, you should implement clear decision-making skills 
by following a few important rules. The first is to be consistent in how you structure 
the site. If you decide to collect all image files in one folder, you should continue that 
practice as you add more pages and images. Websites are more likely to break down 
if files and folders are scattered throughout the server without a consistent rule or 
pattern. Decide on a structure early and stick with it. 

A second rule is to decide on and then create a folder structure that matches the 
structure of the website itself. If the pages can be easily categorized into different 
groups, those groupings should also be reflected in the groupings of the subfolders. 
The names you assign to your files and folders should also reflect their uses on the 
website. This makes it easier for you to predict how modifying a file or folder might 
impact other pages on the website. 

Finally, you should document your work by adding comments to each new web 
page. Comments are useful not only for colleagues who may be working on the site 
but also for the author who must revisit those files months or even years after creating 
them. The comments should include 


¢ The page's filename and location 

¢ The page's author and the date the page was initially created 

¢ Alist of any supporting files used in the document, such as image and audio files 
e A list of the files that link to the page and their locations 

e A list of the files that the page links to and their locations 


By following these rules, you can reduce a lot of the headaches associated with 
maintaining a large and complex website. 
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Linking to a Location within a Document 


Hypertext can point to locations within a document. For example, you could link a 
specific definition within a long glossary page to save users the trouble of scrolling 
In general, a web page h hahed Websi eae " f | | a liale 
should not span more than through the document. Websites containing the text of novels or plays can contain links 
one or two screen heights. to key passages or phrases within those works. When a link is established to a location 


Studies show that users within a document, the browser will jump to that location automatically scrolling the 
often skip long pages page to the linked location. 

where the content runs off 

the screen. 


Marking Locations with the id Attribute 


In order to enable users to jump to a specific location within a document, identify that 
location by adding the following id attribute to an element tag at that location 


id="text" 


where text is the name assigned to the ID. Imagine that Sajja writes a long page 
describing the full menu offered by Curbside Thai. He could mark the location in the 
page where the lunch menu is displayed by adding the following id attribute to the h2 
heading that marks the start of the Lunch Menu section. 


<h2 id="lunch"sLunch Menu</h2> 


| Note that IDs must be unique. If you assign the same ID to more than one element, 
7 the browser will jump to the first occurrence of that ID value. 
IDs are case-sensitive: an 


ID of “top” is different P : F 
from an ID of “TOP”. Linking to an id 


Once you've marked the location with an ID, you link to that element using the 
following hypertext link: 


<a href="file#id">content</a> 


where file points to the location and filename of the linked document and id is 
associated with the element within that document. The following hypertext link points 
to the element with the ID “lunch” within the ct_fullmenus.html file. 


<a href="ct_fullmenus.html#lunch">View our Lunch Menu</a> 


To link to a location within the current page, include only the ID value along with 
the # symbol. Thus, the following hypertext link points to the lunch ID within the 
current web page: 


<a href="#lunch"sView our Lunch Menu</a> 


In both cases, clicking or tapping the link will cause the browser to automatically scroll 
to the location within the page. 


Anchors and the name Attribute 


Early web pages did not support the use of the id attribute as a way of marking 
locations within a document. Instead, they used the <a> tag as an anchor to mark that 


“yi 


page location (hence the “a” in <a> tag). The general form of the anchor was 
<a name="anchor">content</a> 


where anchor is the name given to the anchored text. Inserting content within the 
<a> tag was optional because the primary purpose of the tag was to mark a document 
location, not to mark up content. The following code would establish an anchor at the 
start of the lunch section in the Curbside Thai full menu: 


<h2><a name="lunch"></a>Lunch Menu</h2> 


Once an anchor had been set, you link to the anchor using the same syntax you 
would use with the id attribute. The use of anchors is a deprecated feature of HTML 
and is not supported in strict applications of XHTML, but you will still see anchors used 
in older websites. 
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Linking to a Location within a Document 


¢ To mark a location, add a unique ID to an element at that document location using 
the following id attribute 


ail eepe 


where text is the value of the ID. 
° To link to that location from a different document, use the hypertext reference 


REFERENCE 


<a href="file#text">content</a> 


where file is the name and path location (if necessary) of the external file and text is 
the value of the ID. 
To link to that location from within the same document, use the hypertext reference 


<a href="#text">content</a> 


Linking to the Internet and Other Resources 


The type of resource that a hypertext link points to is indicated by the link’s URL. All 
URLs share the general structure 


scheme: location 


where scheme indicates the resource type and location provides the resource 
location. The name of the scheme is taken from the network protocol used to access the 
resource where a protocol is a set of rules defining how information is passed between 
two devices. Pages on the web use the Hypertext Transfer Protocol (HTTP) protocol 
and therefore the URL for many web pages start with the http scheme. Other schemes 
that can be included within a URL are described in Figure 1-41. 


Figure 1-41 Commonly used URL schemes 


Scheme Description 

fax A fax phone number 

file A document stored locally on a user's computer 

ftp A document stored on an FTP server 

geo A geophysical coordinate 

http A resource on the World Wide Web 

https A resource on the World Wide Web accessed over a secure encrypted connection 
mailto An email address 

tel A telephone number 

sms A mobile text message sent via the Short Message Service 


Linking to a Web Resource 


If you have ever accessed the web, you should be very familiar with website URLs, 
which have the general structure 


http://server/path/filename#tid 
or for secure connections 


https: //server/path/filename#tid 


INSIGHT 


Tutorial 1 Getting Started with HTML 5| HTML 5 and CSS (tats) 


where server is the name of the web server hosting the resource, path is the path 

to the file on that server, filename is the name of the file, and if necessary, id is the 
name of an id or anchor within the file. For example, the following URL uses the HTTP 
protocol to access the web server at www.curbsidethai.com, linking to the document 
location named /unch within the ct_menus.html file in the /thai/docs folder: 


http: //www.curbsidethai.com/thai/docs/ct_menus.html#lunch 


URLs are often entered in a more abbreviated form, http://www.curbsidethai.com 
for example, with no path or filename. Those URLs point to the default home page 
located in the top folder in the server's folder tree. Many servers use index.html as the 
filename for the default home page, so the URL http://www.curbsidethai.com would 
be equivalent to Attp://www.curbsidethai.com/index.html. 


Understanding Domain Names 


The server name portion of a URL is also called the domain name. By studying a 
domain name, you learn about the server hosting the website. Each domain name 
contains a hierarchy of names separated by periods (.), with the top level appearing at 
the far right end. The top level, called an extension, indicates the general audience 
supported by the web server. For example, .edu is the extension reserved for 
educational institutions, .gov is used for agencies of the United States government, 
and .com is used for commercial sites or general-use sites. 

The next lower level appearing to the immediate left of the extension displays the name 
of the individual or organization hosting the site. The domain name curbsidethai.com 
indicates a commercial or general-use site owned by Curbside Thai. To avoid duplicating 
domain names, the top two levels of the domain must be registered with the Internet 
Assigned Numbers Authority (IANA) before they can be used. You can usually register 
your domain name through your web hosting company. Note: You must pay an annual 
fee to keep a domain name. 

The lowest levels of the domain, which appear farthest to the left in the domain 
name, are assigned by the individual or company hosting the site. Large websites 
involving hundreds of pages typically divide their domain names into several levels. 
For example, a large company like Microsoft might have one domain name for file 
downloads—downloads.microsoft.com—and another domain name for customer 
service—service.microsoft.com. Finally, the first part of the domain name displays the 
name of the hard drive or resource storing the website files. Many companies have 
standardized on www as the initial part of their domain names. 


Linking to an Email Address 


Many websites use email to allow users to communicate with a site’s owner, sales 
representative, or technical support staff. You can turn an email address into a hypertext 
link using the URL: 


mailto: address 


where address is the email address. Activating the link opens the user’s email program 
with the email address automatically inserted into the To field of a new outgoing 
message. To create a hypertext link to the email address s.adulet@example.com, you 
could use the following URL: 


mailto:s.adulet@example.com 
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To link to more than one 
email address, add the 
addresses to the mailto link 
in a comma-separated list. 


The mailto protocol also allows you to insert additional fields into the email message 
using the URL: 


mailto: address? fieldi=valuel&field2=value2&... 


where fieldi1, field2, and so forth are different email fields and value1, value2, 
and so forth are the field values. Fields include subject for the subject line of the email 
message and body for the message body. To create a link to an email message with the 
following content 


TO: s.adulet@example.com 
SUBJECT: Test 
BODY: Test Message 


you would use the URL 
mailto:s.adulet@example.com?subject=Test &body=Test%20Message 


Notice that the body text uses 20 character code to represent a blank space since 
URLs cannot contain blank spaces. 

On the Contact Us page, Sajja has inserted the Curbside Thai’s email address. 
Convert this email address into a hypertext link. 


To link to an email address: 
BD 1. Go to the ct_contact.html file in your HTML editor. 


» 2. Change the Curbside Thal sina addres into the olloningimalt 


<a href="mailto:curbside.thai@example.com"> 
curbside. thai@example.com 
</a> 


Note that this is a fictional email address. If you want to test this link, change 
the URL to a link pointing to your own email address. Figure 1-42 highlights 
the hypertext code to the linked email address. 


Figure 1-42 Linking to an email address 


email address marked 


email address as a hyperlink 


mailto scheme 
indicates that this 
is an email link 


p>Call: (764) 555-1151</p 


p»Email: «a href="mailto:curbside. thai@example.com">¢urbside. thaiGexample.com</a></p 
article 


BD 3. Save your changes to the file and then reopen the ct_contact.html file in your 
browser. 


D4. Click the email address link and verify that your device opens your email 
program with the Curbside Thai address already entered. Close the email 
program without sending a message. 


Trouble? Depending on your device, you may have to set up your email 
program to accept hypertext links. 


Skype on the desktop 
uses callto: in place 

of the tel: scheme for 
telephone links. There are 
program scripts available 
on the web that you can 
use in order to work with 
both protocols. 


INSIGHT 
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Email Links and Spam 


Use caution when adding email links to your website. While it may make it more 
convenient for users to contact you, it also might make you more vulnerable to spam. 
Spam is unsolicited email sent to large numbers of people, promoting products, 
services, and in some cases inappropriate websites. Soammers create their email lists 
by scanning discussion groups, stealing Internet mailing lists, and using programs 
called email harvesters to scan HTML code for the email addresses contained in 
mailto URLs. Many developers have removed email links from their websites in order to 
foil these harvesters, replacing the links with web forms that submit email requests to a 
secure server. 

Fighting spammers is an ongoing battle, and they have proved very resourceful in 
overcoming some of the defenses people have created. As you develop your website, 
you should carefully consider how to handle email addresses and review the most 
current methods for safeguarding that information. 


Linking to a Phone Number 


With the increased use of mobile phones to access the web, many developers now 
include links to phone numbers for their company’s customer service or help line. 
Activating the link brings up the user’s phone app with the number already entered, 
making it easier and more convenient to call the business or organization. The URL for 
a phone link is 


tel:phone 


where phone are the digits of the linked number. For example, the following code 
creates a telephone link to the Curbside Thai number: 


Call: <a href="tel:+17045551151">(704) 555-1151</a> 


Because websites are international, any telephone link should include the 
international dialing prefix (+1 for the United States) and the area code. Spaces or 
dashes between digits are optional with the exception of the + symbol before the 
international calling code. However, you can insert pauses in the phone number 
(used when accessing an extension) by inserting the p symbol, as in the following 
telephone link: 


<a href="tel:+17045551151p22">sCall: 555-1151 ext. 22</a> 


Sajja asks you to change the telephone number from the Contact Us page into a 
telephone link. 


To link to a phone number: 
D 1. Return to the et_contact.html file in your HTML editor. 
BD 2. Change the Curbside Thai phone number into the following hypertext link: 


<a href="tel:+17045551151"> 
(704) 555 = 115i 
</a> 


Once again this number is fictional; you can change the URL to a link 
pointing to your own phone number if you want to test the link on a mobile 
device. Figure 1-43 highlights the hypertext code of the telephone link. 
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Figure 1-43 Marking a telephone link 


telephone number including 


telephone 
number marked 
as a hyperlink 


international dialing code 
and area code 


tel scheme 
indicates that this 
is a telephone link 


p Ematl: a href="gail 


article 


; —_—— 
p>Call: <a hrefa'tel:+17045551151">(764) 555-115l</a></p 


je. thai Gexamp le.com">curbside. that@example.com</a p 


BD 3. Save your changes to the file. 


HTML supports links to other types of telephony devices. You can create a link to a 
fax machine using the fax: scheme and a link to your text messaging app by using the 
sms: scheme. 


Working with Hypertext Attributes 


HTML provides several attributes to the a element that control the behavior and 
appearance of hypertext links. Figure 1-44 describes these attributes. 


Figure 1-44 Attributes of the a element 


Attribute Description 


href="url" Provides the url of the hypertext link 


target=(_blank|_parent|_self|_top) Specifies where to open the linked document 


download="filename" Indicates that the link should be downloaded as 
a file, where filename is the name given to the 
downloaded file 


rel="type" Provides the relationship between the linked 
document and the current page 

hreflang="lang" Indicates the language of the linked document 

type="mime-type" Indicates the media type of the linked document 


Using the target attribute, you can control how a page is opened. By default the 
target of a link replaces the contents of the current page in the browser window. In 
some websites, you will want to open a link in a new browser window or tab so that 
you can keep the current page and the linked page in view. To force a document to 
appear in a new window or tab, add the following target attribute to the <a> tag: 


<a href="url" target="window">content</a> 


where window is a name assigned to the browser window or browser tab in which the 
linked page will appear. You can choose any name you wish for the browser window or 
you can use one of the following target names: 


° self opens the page in the current window or tab (the default) 

¢ blank opens the page in a new unnamed window or tab, depending on how the 
browser is configured 

° parent opens the page in the parent of the current frame (for framed websites) 

¢ top opens the page in the top frame (for framed websites) 
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You should use the target attribute sparingly in your website. Creating secondary win- 
dows can clutter up a user’s desktop. Also, because the page is placed in a new window, 
users cannot use the Back button to return to the previous page in that window; they must 
click the browser’s program button or the tab for the original website. This confuses some 
users and annoys others. Many designers now advocate not using the target attribute at 
all, but instead provide the user with the choice of opening a link in a new tab or window. 


= Written Communication: Creating Effective Hypertext Links 


PROSKILLS 


To make it easier for users to navigate your website, the text of your hypertext links 
should tell readers exactly what type of document the link points to. For example, the 
link text 

Click here for more information. 

doesn’t tell the user what type of document will appear when here is clicked. In 
place of phrases like “click here”, you should use descriptive link text such as 

For more information, view our list of frequently asked questions. 

If the link points to a non-HTML file, such as a PDF document, include that 
information in the link text. If the linked document is extremely large and will take a 
while to download to the user's computer, include that information in your link text so 
that users can decide whether or not to initiate the transfer. For example, the following 
link text informs users of both the type of document and its size so users have this 
information before they initiate the link: 

Download our complete manual (PDF 2 MB). 

Finally, when designing the style of your website, make your links easy to recognize. 
Users should never be confused about a link. Also, if you apply a color to your text, do 
not choose colors that make your hyperlinks harder to pick out against the web page 
background. 


Validating Your Website 


After finishing the code for your website, you can validate that code to ensure that there 
are no syntax errors. While browsers are very forgiving of syntax errors and will often 
render the page correctly, you should still perform a validation test for those browsers 
that might not be so accommodating. 

Many HTML editors and web content management systems have built-in validators. 
If you don’t have direct access to an HTML validator you can upload your code to the 
validator at the W3C website. To see how a validator can catch HTML syntax errors, you 
will introduce errors to the ct_about.html file and then test that file in the W3C validator. 


To introduce errors to the ct_about.html file: 
DB 1. Return to the et_about.html file in your editor. 
DB 2. Scroll down and delete the line <h1>About Us</h1>. 


BD 3. Go to the <img> tag for the ct_photo1.png inline image and delete the alt 
attribute, alt="", changing the tag to simply <img src="ct_photo.png" />. 


BD 4. Save your changes to the file. 


Using the validator at the W3C website or one built into your editor, validate the 
ct_about.html file to see the impact of these changes. 
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To validate the code in the ct_about.html file: 
BD 1. Open your browser to W3C validator at https://validator.w3.org/. 


Trouble? If you are using an HTML editor with a built-in validator, talk to 
your instructor about accessing that editor's validation command. 


D 2. Click the Validate by File Upload tab within the web page. 


DB 3. Click the Choose File or Browse button in the web form and locate the 
ct_about.htnll file from the html01 » tutorial folder. 


D 4. Click the Check button to validate the file. 


The validator reports 1 error and provides 1 warning. See Figure 1-45. 


Figure 1-45 Validation report 


Nu Htm! Checker 


Showing results for uploaded file ct_about htm! 
Checker input 
Show — eases ovane wepencet — Options 


Check by Geepied > Choose Fie Wo fhe chopes 


Chece 
Message Fiterng 


t Esror An ing element must have an «lt attribute, except under certain conditions. For details, consult guidence on providing text aliornatives for 
imanes 
Prom line 37. columa 7, to ine 37, coluens 33 


2 Warning Articie lacks heading. Consider using h2-n elements to add identifying headings to all articles 
Prom tne 38 comune 4 to ine 35. comme 12 


Used the HTML parser 
Total eaten bow 3 maecore: 


Because every img element must have an alt attribute (to make the page accessible 
to all users), the validator reports an error that the inline image for the ct_photo.png 
image is missing alternate text. The validator also issues a warning that the page article 
is lacking a heading. While this is not a syntax error (hence the validator only issued a 
warning) it is strongly recommended that all articles have at least one heading. 


To fix the errors in the ct_about.html file: 
BD 1. Return to the ct_about.html file in your editor. 


D 2. Re-insert the heading <h1>About Us</h1> directly below the opening 
<article> tag. 


BD 3. Add the attribute alt="" to the img element for the ct_photo1.png inline image. 
BD 4. Save your changes to the file. 


D 5. Return in your browser to the W3C validator at https://validator.w3.org/ or 
run the validator within your HTML editor. 


D 6. Retest the ct_about.html file, verifying that no errors or warnings are reported. 
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You’ve completed your work on the Curbside Thai website. Sajja will study your 
work and get back to you with future projects for his restaurant. For now, you can close 
any open files or applications. 


a Session 1.3 Quick Check 


1. Which of the follow tags is not used to mark a list? 
a. <ol> ..</ol> 
b. <ul> .. </uls 
Cc. <dl> .. </dl> 
d. <li> .. </li> 
2. To have an ordered list count down from 100, which attributes should you use? 
a. down start="100" 
b. reversed start="100" 
c. decrease start="100" 
d. reversed from="100" 
3. Lists of hypertext links should be enclosed within what tags? 
a. <a> ..</a> 
b. <dl> ... </dl> 
c. <links> .. </links 


REVIEW 


d. <nav> ... </nav> 

4. To link text to the website httos://ww.mobilepanini.com, use the tag: 
a. <a link="https://www.mobilepanini.com"> .. </a> 
b. <link a=" https://www.mobilepanini.com"> ... </link> 
c. <a href=" https://www.mobilepanini.com"> .. </a> 
d. <a src=" https://www.mobilepanini.com"> ... </a> 


5. Using Figure 1-40, the relative path going from the ct_about.html file to the 
ct_catering.html file is: 
a. ../catering/ct_catering. html 
b. ct_catering.html 
c. /catering/ct_catering.html 
d. ./catering/ct_catering.html 
6. What tag can be used to define the starting point for relative paths? 
a. <start /> 
b. <base /> 
C. <a>... </a> 
d. <link /> 
7. What tag should you use to mark the h1 heading with the location 
topHeading? 
a. <hl id="TopHeading">Mobile Panini</h1> 
b. <h1 id="topHeading"sMobile Panini</hi> 
c. <a href="topHeading"></a><hl>Mobile Panini</h1> 
d. All of the above 
8. To link to the email address sajja@example.com, use the URL: 
a. mail:sajja@example.com 
b. sms:sajja@example.com 
c. fax:sajja@example.com 
d. mailto:sajja@example.com 
9. To link to the phone number 970-555-0002, use the URL: 
a. tel:9705550002 
b. phone:9705550002 
c. call:9705550002 
d. dial:9705550002 
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Coding Challenge 1 
Data Files needed for this Coding Challenge: code1-1_txt.html 


Use HTML to create a navigation list of 10 government websites as shown in Figure 1-46. Each item 
in the list should act as a hypertext link to the government side. 


Coding Challenge 1-1 example page 


Government Sites on the Web 


CODE 


USA Government 

Library of Congress 

U.S. Congress 

Ben's Guide to US Government for Kids 
Health Finder 

National Center for Health Statistics 
The Whitehouse 

U.S. Census Bureau 

CIA World Factbook 


The following are the URLs associated with each website: 


e USA government (https://www.usa.gov) 

e Library of Congress (https://www.loc.gov) 

e U.S. Congress (https://www.congress.gov) 

e Federal Depository Library System (https://www.fdlp.gov) 

e Ben’s Guide to US Government for Kids (https://bensguide.gpo.gov) 

¢ Health Finder (https://www.healthfinder.gov) 

e National Center for Health Statistics (https:/www.cdc.gov/nchs) 

e The Whitehouse (https://www.whitehouse.gov) 

e U.S. Census Bureau (https://www.census.gov) 

e CIA World Factbook (https://www.cia.gov/library/publications/the-world-factbook/) 


Do the following: 


1. Open the code1-1_txt.html file from the tutoriall » code! folder. Enter your name and the date 
in the head section of the document and save the file as code1-1.html to the same location. 


2. Within the body section of the file, enter the text Government Sites on the Web. Mark that text as 
an h1 heading. 


3. Place the list of government websites within an unordered list nested within a navigation list. 
Mark each government website as a separate list item. 


4. Mark the text of each government site as a hypertext link using the <a> tag. Set the href attribute 
to the URLs specified above. 


5. Save your changes to the file. 


6. Test the page in your browser, verifying that each item in the list is linked to the appropriate 
government website. 


7. Submit the completed file to your instructor. 
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Coding Challenge 2 


Lu 
Q Data Files needed for this Coding Challenge: code1-2_txt.html 
. Mark up a web page containing the poem Revelation by Robert Frost shown in Figure 1-47. 


Revelation 


by Robert Frost 


We make ourselves a place apart 

Behind light words that tease and flout, 
But oh, the agitated heart 

Till someone find us really out. 


'Tis pity if the case require 
(Or so we say) that in the end 
We speak the literal to inspire 
The understanding of a friend. 


But so with all, from babes that play 
At hide-and-seek to God afar, 

So all who hide too well away 
Must speak and tell us there they are. 


From A Boy's Will, published by AHenry Holt and Company © 1913 (in the public domain) 


Do the following: 


1. Open the code1-2_txt.html file from the tutoriall » code2 folder. Enter your name and the date 
in the head section of the document and save the file as code1-2.html to the same location. 


2. Mark the text Revelation as an h1 heading and the text by Robert Frost as an h2 heading. 
3. Mark each stanza of the poem as a paragraph. 

4. Within each of the three stanzas, end each line with a line break using the <br /> tag. 

5 


. For alternating lines within the three stanzas, insert three &nbsp; character entities to indent the 
text of those lines three spaces. 


6. Replace the line of dashes after the poem with the <hr /> tag to indicate a horizontal rule. 
7. Enclose the reference to the poem’s origin within a <footer> tag. 

8. Mark the text A Boy’s Will using the <cite> tag. 

9. Replace the word copyright with the character reference &copy; 

0. Save your changes to the file. 

1 


. View the page in your browser to verify that the poem’s structure resembles that shown in 
Figure 1-47. 


12. Submit the completed file to your instructor. 
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Coding Challenge 3 


Data Files needed for this Coding Challenge: code1-3_txt.html, code1-3_styles.css, 
drawing01.png — drawing06.png 


CODE 


Display a gallery of six drawings by Renaissance masters using HTML and a CSS style sheet. The page 
containing the drawings is shown in Figure 1-48. 


Coding Challenge 1-3 example page 


Drawing SmcnommechemOldsMastens 


Head of a Young Woman 
— Andrea del Sarto 


Do the following: 


1. Open the code1-3_txt.html file from the tutorial1 » code3 folder. Enter your name and the date 
in the head section of the document and save the file as code1-3.html to the same location. 


2. Add an attribute to the opening <htm1> tag to set the language of the page to “en” (for English). 
3. Within the head section of the document do the following: 

a. Set the character encoding of the file to utf-8. 

b. Set the page title to Coding Challenge 1-3. 

c. Link the file to designs stored in the code1-3_styles.css style sheet file. 
4. Within the page body, insert an h1 heading containing the text Drawings from the Old Masters. 
5. After the h1 heading, insert six section elements using the <sections> tag. 
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6. Within each of the six sections, insert an inline image using the <img /> tag, displaying the 
image files drawing01.png through drawing06.png. For the six inline images, specify the 
following alternate text: Leonardo da Vinci, Jacopo da Pontormo, Raphael, Peter Paul Rubens, 
Andrea del Sarto, and Titian. 

7. After each of the six inline images within the section elements, add a footer element using the 
<footer> tag. Within the six footers, add the following text captions: The Battle of Anghiari --- 
Leonardo da Vinci, Study of a Youth -- Jacopo da Pontormo, The Nativity -- Raphael, Head of a 
Maid -- Peter Paul Rubens, Head of a Young Woman -- Andrea del Sarto, and Head of a Youth 
-- Titian. 

8. For the figure captions in the previous step, replace the six “--” character strings with a line break 
tag (<br />) followed by the &mdash; character reference. 

9. Save your changes to the file. 

10. View the page in your browser to verify that the drawing gallery resembles Figure 1-48. 
11. Submit the completed file to your instructor. 


Coding Challenge 4 


Data Files needed for this Coding Challenge: code1-4_txt.html, code1-4_styles.css, 
code1-4_image.png 


DEBU 


You have been given a file containing several coding errors that need to be fixed for the page to 
pass validation. Locate and fix the errors in the web page. A preview of the fixed page is shown in 
Figure 1-49. 


| CS  ] 
The Teton Crest Trail 


The Teton Crest Trail is an awe-inspiring 40-mile hike along 
the Grand Teton range in western Wyoming. The trail 
extends from Phillips Pass on the border of the Bridger 
Teton National Forest and proceeds north to String Lake in 
Grand Teton National Park 


You can access the Teton Crest Trail from the Granite 
Canyon Trail or from the aerial tramway in Jackson Hole, 
which provides a gradual ascent to the Teton range. There 
are several access trails adjacent from national forest lands of varying degrees of difficulty. 


© Courtesy Patrick Carey 


Along the trail, enjoy an exicting averse of the Death Canyon Sheif with a difficult climb over Mount 
Meek Pass, Hurrican Pass, and the Paintbrush Divide. This is a challenging 3- to 4-day trip, so you must 
pack sufficient supplies and a water purifier. The Teton Crest Trail goes through grizzly bear country, so 
bear spray is a must 

© Distance 40 miles 

© Elevation Gain 10,779 feet 


© Permit Required Yes 


© Difficulty Rating 4 (strenuous) 


HTML 76 
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Do the following: 


1 


. Open the code1-4_txt.html file from the tutorial1 » code3 folder. Enter your name and the date 
in the document and save the file as code1-4.html to the same location. 


. Test the page in the validator at the W3C website (validator.w3.org) or with another validator 
of your choice. Make a note of the errors reported as a guide to debugging the page. Not every 
error will be initially reported. There are 10 syntax errors in the HTML file. 


. Fix all 10 errors you discover and then resubmit the saved document to validation until it passes 
with no warnings or errors. 


View the page in your browser to verify that the page resembles Figure 1-49. 
. Submit the completed file to your instructor. 


Review Assignments 


an 


PRACTICE 


Data Files needed for the Review Assignments: mp_index_txt.html, mp_menu_txt.html, 
mp_events_txt.html, mp_catering_txt.html, 2 CSS files, 2 PNG files, 1 TXT file 


Curbside Thai has partnered with another food truck vendor Mobile Panini. Sajja asks you to create 
a website for the company similar to what you did for his restaurant. The site will have a home page, 


online menu, a description of catering opportunities, and a calendar of upcoming events that 


Mobile Panini will host. A preview of the home page is shown in Figure 1-50. 


Figure 1-50 Mobile Panini home page 


| Z 
ile Panini! 


Menu Events Catering 


Home 


Welcome 


Mobile Panini x the culexaation of the dream of Antonso and Camnen 


Dolcun, who came to Amenca looking to serve people the authentx 


recapes learned froen thew Secilian farmily 
Antomo began work as o child us hes grandmother's del where he 
leased the age-old secrets of Sacilan cookmg. He sefined has techmque 
at the Culaaarv Institute of Milan His younger brother, Carmen. with no 
<< 


less of a love for cookxng and good food. also worked mn the deli and 


became well-ecquamted woth the open-au fresh food axarkets o 


home town. Carmen too 


Milo 


a proud graduate of the Culinary I 


Now you can eryoy what they have learned and mastered, nght outude your door, but with no compromises in Frethnew of 


delicacy of preparanon. We've partnered wath Cir deide Thar to bring you the finest cussumne on flows wheels - from the East and 
the West! 
Phone 10. 2188 


ELS 


E-mail: mobulepanin example com 


Mobile Panini 6 31 West Avenue, Charlotte Ni 28204 704-555-2188 


© Glenn Price/Shuttertock.com 
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The page text has already been written for you and style sheets and graphic files have been created. 
Your job will be to complete this project by writing the HTML markup. 


Complete the following: 


1. Use your HTML editor to open the mp_index_txt.html, mp_menu.txt.html, mp_events_txt.html, 
and mp_catering_txt.html files from the html01 > review folder. Enter your name and the date in 
the comment section of each file, and save them as mp_index.html, mp_menu.html, mp_events 
-html, and mp_catering.html respectively. 

2. Go to the mp_index.html file in your HTML editor. Within the document head, do the following: 
a. Use the meta element to set the character encoding of the file to utf-8. 

b. Add the following search keywords to the document: Italian, Mobile, food, and Charlotte. 

c. Set the title of the document to Mobile Panini. 

d. Link the document to the mp_base.css and mp_layout.css style sheet files. 

3. Go to the document body and insert a header element containing the following: 

a. An inline image from the mp_logo.png file with the alternate text Mobile Panini. Mark the 
image as a hypertext link pointing to the mp_index.html file. 

b. A navigation list containing an unordered list with the following list items: Home, Menu, 
Events, and Catering. Link the items to the mp_index.html, mp_menu.html, mp_events.html, 
and mp_catering.html files respectively. 

4. Below the header element insert an article element. Below the article element, insert a 
footer element containing the following text: 

Mobile Panini dj, 31 West Avenue, Charlotte NC 28204 i 704-555-2188 

where db is inserted using the 9832 character code and an extra space is added between NC and 

28204 using the nbsp character name. 

5. Go to the mp_pages.txt file in your text editor. This file contains the text content of the four pages 
in the Mobile Panini website. Copy the text of the Welcome section, which will be used in the 
home page of the website. Return to mp_index.html in your HTML editor and paste the copied 
text into the article element. 

6. Within the article element, do the following: 

a. Mark the Welcome line as an h1 heading. 

b. Below the hi element, insert an inline image containing the mp_photo1.png file with an 
empty text string for the alternate text. 

c. Mark the next five paragraphs as paragraphs using the p element. Within the first paragraph, 
mark the text Mobile Panini as strong text. Within the third paragraph mark the text Curbside 
Thai as emphasized text. 

d. The fourth paragraph contains Mobile Panini’s phone number. Mark the phone number as 
a telephone link and be sure to include the international code in the URL. Note that this 
number is fictional, so, if you have access to a mobile browser and want to test the link, you 
might want to replace this number with your phone number. 

e. The fifth paragraph contains Mobile Panini’s email address. Mark the email address as a 
hypertext link. Once again, note that this email address is fictional, so, if you want to test this 
link, you will need to replace the Mobile Panini email address with your email address. 

7. Save your changes to the file and then open the mp_index.html file in your browser. Verify that 
the layout and appearance of the page resemble that shown in Figure 1-45. If possible, test the 
telephone links and email links to verify that they open the correct application. 

8. Go to the mp_index.html file in your HTML editor, and copy the header and footer elements. 
Then go to the mp_menu.html file in your HTML editor and paste the header and footer 
elements into the body element so that this page has the same logo and navigation list and footer 
used in the home page. Insert an article element between the header and footer. 

9. Return to the mp_pages.txt file in your text editor and copy the contents of the Mobile Panini 
menu. Then, go to the mp_menu.html file in your HTML editor and paste the copied text into the 
article element. 


EN eek HTML 5 and CSS | Tutorial 1 Getting Started with HTML 5 


10. 


il. 


12: 


13. 


14. 


Bs 


16. 


IZ, 
18. 


19, 


20. 


Dil. 


Dae 


Bde 


Within the article element of the mp_menu.htm file, do the following: 

a. Mark the text title Our Menu as an h1 heading. 

b. Enclose the menu items in a description list with the name of each menu item marked with 
the dt element and each menu description marked with the dd element. 

Save your changes to mp_menu.html file. Open the page in your browser and verify that each 

menu item name appears in a bold font and is separated from the indented item description by a 

horizontal line. 

Go to the mp_index.html file in your HTML editor and copy the header and footer elements. 

Then, go to the mp_events.html file in your HTML editor and paste the header and footer 

elements into the body element. Insert an article element between the header and footer. 

Return to the mp_pages.txt file in your text editor and copy the list of upcoming events at the 

bottom of the file. Then, go to the mp_events.html file in your HTML editor and paste the copied 

text into the article element. 

Within the article element, do the following: 

a. Mark the text Where Are We This Week? as an h1 heading. 

b. Enclose each day’s worth of events within a separate div (or division) element. 

c. Within each of the seven day divisions, enclose the day and date as an h1 heading. Enclose 
the location within a paragraph element. Insert a line break element, <br />, directly 
before the time of the event so that each time interval is displayed on a new line within the 
paragraph. 

Save your changes to mp_events.html file. Open the page in your browser and verify that each 

calendar event appears in its own box with the day and date rendered as a heading. 

Go to the mp_index.html file in your HTML editor and copy the header and footer elements. 

Then, go to the mp_catering.html file in your HTML editor and paste the header and footer 

elements into the body element. Insert an article element between the header and footer and 

then insert an aside element within the article. 

Directly after the opening <article> tag, insert an hi element containing the text Catering. 

Return to the mp_pages.txt file in your text editor and copy the text about the mobile kitchen, 

including the heading. Then, go to the mp_catering.html file in your HTML editor and paste the 

copied text into the aside element. 

Within the article element, do the following: 

a. Mark the text About the Mobile Kitchen as an h1 heading. 

b. Mark the next two paragraphs as paragraphs. 

Return to the mp_pages.txt file in your text editor and copy the text describing Mobile Panini’s 

catering opportunities; do not copy the Catering head. Then, go to the mp_catering.html file in 

your HTML editor and paste the copied text directly after the aside element. 

Make the following edits to the pasted text: 

a. Mark the first two paragraphs as paragraphs. 

b. Enclose the list of the six catering possibilities within an unordered list with each item marked 
as a list item. 

c. Mark the concluding paragraph as a paragraph. 

Save your changes to mp_catering.html file. Open the page in your browser and verify that the 

information about the mobile kitchen appears as a sidebar on the right edge of the article. 

Return to the mp_index.html file in your browser and verify that you can jump from one page to 

another by clicking the entries in the navigation list at the top of each page. 
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Case Problem 1 


Data Files needed for this Case Problem: jtc_index_txt.html, jtc_services_txt.html, 2 CSS files, 
3 PNG files, 1 TXT file 


Jedds Tree Care Carol Jedds is the owner and operator of Jedds Tree Care and tree removal 

and landscaping company in Lansing, Michigan. She has asked for your help in developing her 
company’s website. She has already written some of the text for a few sample pages and wants you to 
write the HTML code. Figure 1-51 shows a preview of the company’s home page that you’ll create. 


Jedds Tree Care home page 


xe&. 


home services 


S}UDUILUON 


thared jedds to remove an 
old Sugar maple from a 
narrow yard, They did the 
job with no damage to my 
gatage and cleaned tt all up 
that same day. Great 
service, 


Kevin $ (Dewny) 


coat coamina comes Jedds Tree Care 


tee and provide an 
estimate for its removal 
They did the job fast and at 
the fowest bid. (1 call then Jedds Tree Care is a complete yard service including branch trimming, pruning, 
nsinalplenarinyaoneal fos stump removal, and emergency tree removal. We offer same-day emergency service 
Passer 24/7. Jedds operates out of East Lansing, MI, but also serves the surrounding 
counties for your urban and rural needs. We provide tree and yard care for both 
Aan K (stochirudge) commercial and residential clients. Customer satisfaction is our primary goal. 


Their ream took down five Our business is fully insured. Safety is our number one priority. We have professional 


ee araenNnNN arborists on staff to deal with your special needs and we can handle any job, large or 


Took extra Cate NOT tO small. 


Gisturh ary lawn and 
gatden, | highly recomnmend 
pg nb Jedds Tree Care 
Daved P (Lansing) 201 Edward Ave. 
Lansing, MI 48930 
email: jeddstree@exampte.com 
phone: 517.555.4811 


© mary981/Shutterstock.com 


The style sheets and graphic files have already been created for you. Your job is to write the HTML 
markup. 


Complete the following: 


1. Using your editor, open the jtc_index_txt.html and jtc_services_txt.html files from the html01 > 
case1 folder. Enter your name and the date in the comment section of each file, and save them 
as jtc_index.html and jtc_services.html respectively. 

2. Go to the jtc_index.html file in your HTML editor. Within the document head, do the following: 
a. Use the meta element to set the character encoding of the file to utf-8. 

b. Set the document title to Jedds Tree Care. 
c. Link the document to the jtc_base.css and jtc_layout.css style sheet files. 
3. Within the document body, insert a header element, an aside element, and an article element. 
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4. Within the header element, insert a navigation list with links to jtc_index.html and jtc_services 
-html file. The text of the links should be home and services respectively. 

5. Go to the jtc_pages.txt file in your text editor. The first section in the file contains comments 
made by Jedds Tree Care customers. Copy the text of the three reviews including the reviewer 
names. Then, go to the jtc_index.html file in your HTML editor and paste the copied text within 
the aside element. 

6. Within the aside element, add the following content and markup: 

a. Directly after the opening <aside> tag, insert an inline image for the jtc_comments.png file. 
Specify Comments as the alternate text. 

b. Enclose each of the three reviewer comments within a blockquote element, including both 
the text of the quote and the name of the review. 

c. Within each of the three blockquote elements, 

i. mark the review as a paragraph. 

ii. mark the line containing the reviewer name as a cite element. 

iii. replace the “---” text with the em dash character (—) using the character reference 
&mdash;. 

7. Go to the article element and insert a header element containing the inline image file jtc_ 
photo1.png with the alternate text /edds Tree Care. 

8. Return to the jtc_pages.txt file in your text editor and copy the second section of text containing 
the description of the company and its contact information. Then, go to the jtc_index.html file in 
your HTML editor and paste the copied text in the article element, directly below the article 
header. 

9. Mark up the content of the page article as follows: 

a. Mark the first two paragraphs using the <p> tag. 

b. Enclose the five lines of the contact information within an address element. Insert a line 
break element at the end of the first four lines so that each part of the address appears on a 
new line in the rendered page. 

c. Mark the text Jedds Tree Care in the first line of the address as a strong element. 

d. Mark the email address as a hypertext link. Make the telephone number a telephone link, 
including the international access code. 

10. Save your changes to the jtc_index.html file. Open the page in your browser and verify that 
the layout and contents of the page resemble that shown in Figure 1-51. Note that under the 
smaller screen widths associated with mobile devices, the text of the reviewer comments is not 
displayed. 

11. Go to the jtc_services.html file in your HTML editor. Insert the same metadata in the document 
head to match what you did for the jtc_index.html file except name the page title Jedds Tree Care 
Services. 

12. Go to the jtc_index.html file in your HTML editor and copy the body header. Then, go to the 
jtc_services.html file and paste the copied header into the document body so that both files 
share a common header design. 

13. Return to the jtc_pages.txt file in your text editor and copy the content of the third section, which 
contains information on the services offered by Jedds Tree Care. Be sure to copy the heading as 
well. Then, go to the jtc_services.html file in your HTML editor and paste the copied text directly 
after the header. 

14. Mark the content describing Jedds Tree Care services as follows: 

a. Mark the heading /edds Tree Care Services as an h1 heading. 

b. Directly after the h1 element, insert an inline image file for the jtc_photo2.png with the 
alternate text set to an empty text string (“”). 

c. Mark each of the headings associated with individual services as h2 headings. 

d. Mark each service description as a paragraph. 
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15. Directly after the text of the last service, insert a footer element containing the following text: 
Jedds Tree Care ® 201 Edward Ave. @ Lansing, MI 48930 
where the ® symbol is inserted using the character reference &#9830;. 


16. Save your changes to the file and open the jtc_services.html file in your browser. Verify that the 
page title is displayed as a major heading and the name of each service is displayed as a second 


level heading. 


Case Problem 2 


4 CSS files, 2 PNG files, 3 TXT files 


create is shown in Figure 1-52. 


CHALLENGE 


Data Files needed for this Case Problem: dr_index_txt.html, dr_info_txt.htm, dr_faq_txt.html, 


Diane’s Run Diane’s Run is a charity run to raise money for breast cancer awareness and research 
funding. Peter Wheaton is the charity run’s organizer and he has asked you to help modify the run’s 
website. He has revised text that he wants added to the current site. A preview of the page you'll 


Figure 1-52 Diane’s Run home page 


What Your Support Does 
Every 10 minutes a woman is 
Gagnored with 
reaction it fear and confusion. 
SUpPOM is just B PHOS Call Or mouse 
Our tree services offer 
friendly ear and expert guidance to 
anyone dealing with this ite 
trestening diness 


Drees? Cancer. Mer first 


Check away 


By running or walking with us you can 
ensure that we are there when people 
need u 
CONsNDYBON can Nele- 


§. Here is how your 


© $15 pays for s headscarf set. 
boosting the confidence of women 
who have lost thew hair from 
breast cancer treatment 


S50 trains a member of cur 
support network for s year to Reip 
morove the care of women with 
breast cancer 


$125 covers the cost of counseling 
124Hons to Help women cope with 
the distress of ther cancer 
eatment 


© $250 tunds a hosottal information 
Staton for 3 year so that peogie 
affected by breast cancer Neve 
eazy access to the Latest resources 
and help 


Diane's Run % 45 Mountain Drive & Cheyenne, WY E2001 


Diane's Run - September 12, 2021 


Join over 2000 athletes in Cheyenne. Wyoming. for Diane's Run to raise money for breast cancer 
awareness and research. The SK and 10K races are challenging, yet achievable. You can aim fora 

personal best while taking part to raise money for this important charity. If you can't mun, consider 
walking. Join young and old in the fight by participating in the 1-Mile Walk for Hope. 


How to Join 


You can guarantee a spot by filling out the entry form and mading it to dianesrun@oxampte. co 

The $35 entry fee is tax deductible and goes directly to important research and women in need, We 
keep our overhead very low so every dollar counts. More than 75% of the net proceeds fund 
screening and treatment programs in your communities. We welcome out-of-town vistors. We will 


help you find accommodations during your visit 
History 
Since its inception in 2014, Diane's Run has grown from a purely local event involving 100 runners 


to a signature Wyoming event with more than 2000 participants annually. The event is enormously 
effective in spreading the message that breast cancer need not be fatal if caught early enough with 
mammography and regular breast self-exams. As well as a top-flight athletic event, Diane's Run is 
an emotionally moving event attracting many first timers and recreational runners. This event 
provides all of us with the opportunity to spread a hopeful message about breast cancer to our 
families and our communities. 


Remembering Diane 


Diane's Run is named in remembrance of Diane Wheaton, mother of two and wife of Peter, who 
passed away in May, 2013. Diane was an outspoken advocate of physical fitness and healthy living 
She was an inspiration to all who knew her and continues to be an inspiration to the thousands of 
runners who have participated in this event 


We hope you can join us this year and become part of the Diane's Run family, 


© wavebreakmedia/Shutterstock.com 
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Peter has supplied you with the text content, the graphic images, and style sheets you need for the 
project. Your job will be to write HTML code for three pages: the site’s home page, a page containing 
race information, and finally a page containing a list of frequently asked questions (FAQ). 


Complete the following: 


1. Using your editor, open the dr_index_txt.html, dr_info_txt.html, and dr_faq_txt.html files from 
the html01 > case2 folder. Enter your name and the date in the comment section of each file, 
and save them as dr_index.html, dr_info.html, and dr_faq.html respectively. 

2. Go to the dr_index.html file in your HTML editor. Within the document head, add the following 
metadata: 

a. Set the character encoding of the file to utf-8. 

b. Insert the search keywords: breast cancer, run, race, and charity. 

c. Set the title of the document to Diane’s Run. 

d. Link the document to the dr_base.css and dr_layout.css style sheet files. 

3. Within the document body, insert a header element, two section elements, and a footer element. 

4. In the header element, insert a navigation list containing an unordered list with the items: 
Home, Race Info, and FAQ. Link the items to the dr_index.html, dr_info.html, and dr_fag.html 
files respectively. 

5. The file dr_index.txt contains the text to be inserted into the Diane’s Run home page. Go to the 
dr_index.txt file in your text editor and copy the text from the first section of the file. Then, go to 
the dr_index.html file in your HTML editor and paste it into the first sect ion element. 

6. Add the following markup to the content of the first section element: 

a. Mark the line What Your Support Does as an h1 heading. 

b. Mark the next two paragraphs as paragraphs using the p element. 

c. Mark the four ways a contribution can help as an unordered list. Mark the dollar amounts of 
each list item using the strong element. 

7. Return to the dr_index.txt file in your text editor, copy the text from the second section, then 
close the dr_index.txt file. Go to the dr_index.html file in your HTML editor and paste the copied 
text within the second section element. 

8. Within the second section element in the dr_index.html file, add the following: 

a. Enclose the opening heading Diane’s Run - September 12, 2021 within a header element and 
marked as an h1 heading. Directly above this heading, insert the inline image file dr_photo1 
.png with Diane’s Run as the alternate text of the image. 

b. Mark the first paragraph after the header as a paragraph. Mark the text Diane’s Run in this 
opening paragraph using the strong element. 

c. Mark the minor headings How to Join, History, and Remembering Diane as h2 headings. 
Mark the other blocks of text as paragraphs. 

9. Within the £ooter element, insert the following text: 

Diane’s Run ¥ 45 Mountain Drive ¥ Cheyenne, WY 82001 

where the ¥ character is inserted using the character reference &#9829;. 

10. Save your changes to the file and then open dr_index.html in your browser. Verify that the 
content and the layout of the page resemble that shown in Figure 1-52. 

11. Go to the dr_info.html file in your HTML editor. Within the document head, link the page to the 
dr_base.css and dr_layout2.css style sheets. 

12. Go to the dr_index.html file in your HTML editor and copy the body header content. Then, go to 
the dr_info.html file in your HTML editor and paste the copied content into the document body. 
Repeat for the body footer so that the Racing Information page has the same navigation list and 
footer as the home page. Between the header and footer element, insert a section element. 


14. 


15. 


16. 
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Explore 13. Within the section element, insert a header element with the following content: 

a. Insert a paragraph with the text Page last updated: Tuesday, August 31, 2021. Mark the date 
using the time element with the datetime attribute equal to 2021-08-31. 

b. Add the text Race Information as an h1 heading. 

c. Insert the inline image file dr_logo.png with Diane’s Run as the alternate text. 

Go to the dr_info.txt file in your text editor. This file contains the text describing the race. Copy 

the content describing the race from the file, then close the dr_info.txt file. Go to the dr_info.html 

file in your HTML editor and paste the copied text into the section element, directly after the 
section header. 

Mark the content of the section element as follows: 

a. Mark the opening block of text directly after the section header as a paragraph. 

b. Mark the headings Race Times, Goodies and Stuff, and Notes as h2 headings. 

c. Below each of the h2 elements, mark the list of items that follows as an unordered list. 

Save your changes to the file and then load dr_info.html in your browser to verify that the layout 

and content are readable. 

Go to the dr_faq.html file in your HTML editor. Within the document head, link the page to the 

dr_base.css and dr_layout3.css style sheets. 

Go to the dr_index.html file in your HTML editor and copy the body header content. Then, go to 

the dr_faq.html file in your HTML editor and paste the copied content into the document body. 

Repeat with the body footer so that the FAQ page has the same navigation list and footer as was 

used in the home page. Between the header and footer element, insert a section element. 

Within the section element, insert a header element with the id attribute pagetop. Within the 

header, insert the inline image file dr_logo.png with the alternate text Diane’s Run followed by 

the h1 element with the text Frequently Asked Questions. 

Go to the dr_faq.txt file in your text editor. This file contains a list of frequently asked questions 

followed by the question answers. Copy the text and then close the dr_faq.txt file. Then, go to 

the dr_faq.html file in your HTML editor and paste the copied text into the section element, 
directly after the section header. 

Explore 21. Next, you'll create a series of hypertext links between the list of questions and their 
answers within the same document. Make the following changes to the section element in the 
dr_faq.html file: 

a. Mark the 13 questions at the top of the section as an ordered list. 

b. Notice that below the ordered list you just created, the questions are repeated and each 
question is followed by its answer. Mark the text of those questions as an h2 heading and 
the answer as a paragraph. Add an id attribute to each of the 13 h2 headings with the first 
heading given the id faq1, the second heading faq2, and so forth down to faq13 for the last 
h2 heading. 

c. After the last answer, insert a paragraph with the text Return to the Top and mark the text as a 
hypertext link pointing to the header element with the id pagetop. 

d. Return to the ordered list at the top of the section that you created in Step a. Change each 
item in the ordered list to a hypertext link pointing to the h2 heading containing the question’s 
answer that you created in Step b. For example, the first question How do | sign up? should 
be linked to the h2 heading with the faq1 id. 

Save your changes to the file and then open dr_faq.html in your browser. Verify that by clicking a 

question within the ordered list, the browser jumps to that question’s answer. Further, verify that 

clicking the Return to the Top link at the bottom of the page causes the browser to return to the 
top of the page. 
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€5 Explore 23. Return to the dr_index.html file in your HTML editor. Add the following two 
hypertext links to the How to Join paragraph in the second section element: 

a. Change the email address dianesrun@example.com to an email link with the subject heading 
Entry Form. 

b. Change the word accommodations to a hypertext link pointing to the element with the id 
faq13 in the dr_faq.html file. 

24. Save your changes to the file and reload dr_index.html in your browser. Verify that clicking the 
email link brings up your email program with the email address and the subject heading already 
filled in. 

25. Click the accommodations hypertext link and verify that the browser goes to the last answer on 
the FAQ page. 

26. Verify that you can jump between all three pages by clicking the navigation links at the top of the 


page. 


TUTORIAL . 


OBJECTIVES 


Session 2.1 

e Explore the history of CSS 

e Study different types of style 
sheets 

e Explore style precedence and 
inheritance 

e Apply colors in CSS 


Session 2.2 

¢ Use contextual selectors 

¢ Work with attribute selectors 
¢ Apply text and font styles 

e Use a web font 


Session 2.3 

° Define list styles 

¢ Work with margins and 
padding space 

e Use pseudo-classes and 
pseudo-elements 

e Insert page content with CSS 


STARTING DATA FILES 


Getting Started ¢& 
with CSS “ 


Designing a Website for a Fitness Club 


Case | Iri and Succeed Sports 


Alison Palmer runs Tri and Succeed Sports, an athletic club in 
Austin, Texas, that specializes in coaching men and women aspiring 
to compete in triathlons and other endurance sports. The center 
provides year-round instruction in running, swimming, cycling, and 
general fitness with one-on-one and group training classes. Alison 
has asked you to work on the company’s new website. 


Alison designed the original Tri and Succeed Sports website several 
years ago but she now feels that the site needs a makeover. She 
wants a new design that uses color and interesting typography to 
create visual interest and impact. She wants you to use CSS to help 
give the website a new look. 


tss_bike_txt.html 
tss_home_txt.html 
tss_run_txt.html 
tss_swim_txt.html 
tss_styles_txt.css 
+ 8 files 


code2-2_txt.html 
code2-2_txt.css 
+1 file 


ph_plays_txt.html 
ph_styles_txt.css 
+ 8 files 


tss_coach_txt.html 
coach_styles_txt.css 
+ 8 files 


code2-3_txt.html 
code2-3_txt.css 
+ 2 files 


cw_class___txt.html 
cw_styles_txt.css 
+ 3 files 


code2-1_txt.html 
code2-1_txt.css 


code4 


code2-4_txt.html 
code2-4_txt.css 
+ 2 files 


17 demo files 
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Session 2.1 Visual Overview: 


The @charset rule 
specifies the character 
encoding used in the 
style sheet file. 


@charset “utf-8"; 


/* 
New Perspectives on HTML5 and CSS3, 8th Edition 
Tutorial 2 
Tutorial Case 


Style comments 
provide information TSS Typographic Style Sheet 


about the style sheet. Author: Alison Palmer 
Date: 2021-03-01 


Filename: tss_styles.css 


The HSL color value defines 
a color based on its hue, 
saturation, and lightness. 


/* HTML and Body Styles 
Astyle rule sets the html { | 
display properties of a background-color: hsl(27, 72%, 729%)35 
page element. } 
body { The RGB color value 
color: pepeot, 915 oi). eat pice gpa cccn 
a oy ; the mixture of red, green, 
background-color: ivory; anal (alu eollars. 
CSS supports 147 color i 
names. 
The selector defines WY Wwe oe, Shartve: & 
what element or elements /* Heading Styles */ The style property 
are affected by the rule. Sesciics iar osnee ot 
hi { the selector to modify. 
yx color: white; 
The color property sets background-color: rgb(222, 128, 60); 
the text color for the } 


selected elements. 


The background-color 
property sets the 


background color for the 
selected elements. 
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CSS Styles and Colors 


The browser window background 
color is set to the color value 
hsl(27, 72%, 72%) using style rule 


for the html element. 


The h1 headings appear in white 
on a dark orange background as 
specified by the style rule for the 
hi element. 


TRA 


ele © © sim ignenee mi e'ele © © os eae 


i 


The h2 headings 
appear in white 
on a light orange 


background as 
specified by the 
style rule for the 
h2 element. 


About TSS 


Saice 2002, Tri and Succeed Sports has 
provided Austen wrth « firvt class traaung 
center for athictes of all abaliics and goals. We 
specialize on helpmg you reach your fall 
potennal. You tell us what you want to do. we 
work to fulfill your needs 


Waat to swim? Great! Interested mm mmproving 
your cychng” Fantasnc! Want to tackic a 
tmathlon? We're there for you: before, dunng 
and afte: the race. Or do you juwt want to get 
more fit? We are on t. We custome our 
mwtruchon to match your goals. And you wall 
finash what you star 


Winter muitruction starts soon. Get a sump on 
your sumuser goals by poumng us for endiodual os group metruction a 


¢ Russing: We start with the basics to help you run faster and farther than 
you ever thought powuble without aches and pams 

e Cycling The mdoor bike tramens at TSS mclude everything you need to 
refine your technaque. stanuna. and power for unproved results on the 
road 

¢ Swimming: The open water esom can be one of the moat frightenme 
sports to master, Ow classes begm woth bassc techniques so that your 
swan can be very eryoyable. and not a chore 


Contact us to set up indrvsdual imstrucnon and awsewunent 


Athletes are the foundation of every enceessful trauming program The best coach 
ss an experienced guide who beguis with cach athhete’s hopes. dreaae and 
desaes and then tailors a trauing plan based on that individuals + currem fitness 
and lifestyle Since 2002. TSS has helped hundreds of wndaviduals achseve 
success in many fitsess arcas. The vanner ts pint the one who flanhes first tax 
anyone who starts the race and perseveres Joie ws and begin explonng the 
powuble 


omments 


Thack you for all 
that you have 

douc. | am amazed 
at my progress I 
realize that I have | 
lofty goals but you 
have me well on 
ary way 


Alison kept me 
focused working 
toward my dreams 
She fosters a 
wppomve and 
camng 
euviwoasment for 
growth as an 
athlete and as a 
person. Thank 


you! 


You do a right! 
Your track record 
proves it. Proud to 
be a TSS athiete 
aod Tm honored to 
have you all as my 
coaches and 
support teen 


The conches at 
TSS meat you with 
the hughest reapect 
whether youre an 
sndividual getraag 
off the couch for 
the first ume or an 
cite athlete 
traumng for the 
tron Man. They 
know thew stuff 


Page body background color 
is set to ivory using the style 
rule for the body element. 


Page text is set to the 


color value rgb(91, 91, 91). 


© Ysbrand Cosijn/Shutterstock.com; 
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© ostill/Shutterstock.com; 

© Monkey Business Images/Shutterstock.com 
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Introducing CSS 


An important principle discussed in the previous tutorial was that HTML only defines 
a document's content and structure, not how it should be displayed. The appearance 
of the page is determined by style sheets written in the Cascading Style Sheets (CSS) 
language. Starting with this tutorial, you'll learn how to write your own CSS style 
sheets. 

The CSS language is maintained by the same World Wide Web Consortium (W3C) 
that defines the standards for HTML. As with HTML, CSS has gone through several 

You can research browser : re 7 : 

sunport for CeSat versions, the latest of which is CSS Version 3, more commonly known as CSS. CSS is 

Wi eanilis@rcorn not based on a single specification but rather is built upon several modules, where each 
module is focused on a separate design topic. At the time of this writing, there were 
over 50 CSS modules with each module enjoying different level of browser support. 
The W3C continues to expand the scope of the language, which means that many new 
design features are still at the stage where few, if any, browsers support them. 

In this tutorial, you'll focus mostly on CSS features that have near-universal support 
among current browsers. However, you'll also examine workarounds to support older 
browsers and study ways to accommodate the difference between browsers in how 
they implement the CSS language. 


Types of Style Sheets 


A website’s appearance is not the product of a single style sheet; rather, it is a 
combination of style sheets starting from the browser style sheet and then superseded 
by user-defined style sheets, external style sheets, embedded style sheets, and finally, 
inline styles (see Figure 2-1.) Let’s examine each of these style sheets in more detail. 


Figure 2-1 Hierarchy of style sheets 


inline styles 


embedded styles 


user-defined styles 


browser styles 
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The first styles to be processed in rendering a website are the browser styles or user 
agent styles, built into the browser itself. In the absence of competing styles from other 
style sheets, browser styles are the ones applied to the web page. 

The next styles to be processed are user-defined styles, created by the user within 
the browser. For example, a user with a visual impairment could make a website easier 
to read by altering the browser's default settings, displaying text in highly contrasting 
colors and a large font. Any user-defined style has precedence over a browser style. 

User-defined styles can be superseded by external styles, which are styles created 
and placed within a CSS file and linked to the website. You used external style sheets 
in the last tutorial when you linked the Curbside Thai website to a collection of CSS 
files. As you saw in that tutorial, multiple documents can access the same style sheet, 
making it easier to apply a common design to an entire website. 

Above external style sheets in the hierarchy are embedded styles, which are the 
styles placed within the HTML file itself. Embedded styles only apply to the HTML 
document in which they are created and are not accessible to other documents in the 
website. 

Finally, at the highest order of precedence are inline styles, which are added as 
attributes of specific elements within the HTML file. The use of embedded styles and 
inline styles is not considered best practice because it violates one of the basic tenets of 
HTML: that HTML files should only describe the content and structure of the document 
and not the design itself. 

Thus, the final appearance of the website is based on a combination of the styles 
from these different sources. Some of the styles might originate from the browser 
style sheet while others will be defined in an external style sheet or an embedded style 
sheet. Part of the challenge of CSS is determining how styles from these different style 
sheets interact to determine the page’s final appearance. 


Viewing a Page Using Different Style Sheets 


You'll start your work on the Tri and Succeed Sports website by viewing how the home 
page appears when it is rendered using only those styles in the browser style sheet. 


To view the Tri and Succeed Sports home page: 


BD 1. Use your editor to open the tss_home_txt.html file from the html02 » 
tutorial folder. Enter your name and the date in the comment section of the 
file and save the document as tss_home.htnil. 


BD 2. Take some time to scroll through the document to become familiar with its 
content and structure. 


D 3. Open the tss_home.html page in your browser. Part of the appearance of 
the page is shown in Figure 2-2. 
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The TSS home page rendered using only the browser style sheet 
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Trouble? Depending on your browser's style sheet, your page might not 
exactly resemble the one shown in Figure 2-2. 


The browser style sheet applies a few specific styles to the page, including adding 
solid circles to the navigation list items, as well as displaying hypertext in blue, 
headings in a large bold font, and strong text in a bold font. 

However, the layout of these elements makes the page difficult to read. Alison has 
an external style sheet containing styles that will present this page in a more pleasing 
three-column layout. Link this page now to her style sheet file and then reload the 
document in your browser to view the impact on the page’s appearance. 


HTML 91 
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To change the layout of the TSS home page: 


BD 1. Return to the tss_home.htnll file in your HTML editor and add the following 
link element to the head section directly after the title element: 


<link href="tss_ layout.css" rel="stylesheet" /> 


Figure 2-3 highlights the newly added code in the document. 


Figure 2-3 Linking to the tss_layout.css file 
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file is a style sheet 
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D 2. Save your changes to the file and then reopen the tss_home.html file in your 
browser. Figure 2-4 shows the appearance of the page using the layout 
styles defined in the tss_layout.css file. 


Figure 2-4 The TSS home page using the tss_layout.css style sheet 
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The tss_layout.css file controls the placement of the page elements but not their 
appearance. The colors, fonts, and other design styles are still based on the browser 
style sheet. 
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Exploring Style Rules 


If the element tag is the building block of the HTML file, then the style rule, which 
defines the styles applied to an element or group of elements, is the building block of 
the CSS style sheet. Style rules have the general form 


selector { 
propertyl: valuel; 
property2: value2; 


} 


where selector identifies an element or a group of elements within the document and 
the property: value pairs specify the style properties and their values applied to that 
element or elements. For example, the following style rule has a selector of h1 to match 
all h1 elements in the document and it has property: value pairs of color: red 

and text-align: center that tell the browser to display all h1 headings in red and 
centered on the page: 


hi { 
color: red; 
text-align: center; 


} 


Selectors can also be entered as comma-separated lists as in the following style rule 
to display both h1 and h2 headings in red: 


hi, h2 { 
color: red; 


} 


Like HTML, CSS ignores the use of white space, so you can also enter this style more 
compactly in a single line: 


h1, h2 {color: red; } 


Writing a style rule on a single line saves space, but entering each style property 
on a separate line often makes your code easier to read and edit. You will see both 
approaches used in the CSS files you encounter on the web. 


Browser Extensions 


In addition to the W3C-supported style properties, most browsers supply their own 
extended library of style properties, known as browser extensions. Many of the styles 
that become part of the W3C specifications start as browser extensions and for older 
browser versions, sometimes the only way to support a particular CSS feature is through 
a browser extension tailored to a particular browser. 

Browser extensions are identified through the use of a vendor prefix indicating the 
browser vendor that created and supports the property. Figure 2-5 lists the browser 
extensions you'll encounter in your work on web design. 


Figure 2-5 Vendor prefixes for browser extensions 


Vendor Prefix Rendering Engine Browsers 

-khtml- KHTML Konqueror 

-moz - Mozilla Firefox, Camino 

-ms- Trident Internet Explorer 

-O- Presto Opera, Nintendo Wii browser 


-webkit- WebKit Android browser, Chrome, Safari 
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For example, one of the more recent style features added to CSS is the layout style 
to display content in separate columns. The number of columns is indicated using 
the column-count property. To apply this style in a way that supports both older and 
current browsers, you would include the browser extensions first followed by the most 
current CSS specification: 


article { 
-webkit-column-count: 3; 
-moz-column-count: 3; 
column-count: 3; 


} 


In general, browsers process style properties in the order they’re listed, ignoring 
those properties they don’t recognize or support, so you always want the most current 
specifications listed last. 


Embedded Style Sheets 


The style rule structure is also used in embedded style sheets and inline styles. 
Embedded styles are inserted directly into the HTML file by adding the following style 
element to the document head 


<style> 
style rules 
</style> 


where style rules are the different rules you want to embed in the HTML page. 
For example, the following embedded style applies the same style rules described 
previously to make all h1 headings in the current document appear in red and 
centered: 


<style> 
h1 { 
color: red; 
text-align: center; 


i 


</style> 


Remember that, when all else is equal, the style that is loaded last has precedence 
over styles defined earlier. In the following code, the browser will load the embedded 
style sheet last, giving it precedence over the style rules in the tss_styles.css file. 


<link href="tss_styles.css" rel="stylesheet" /> 
<style> 

style rules 
</style> 


If the order of the 1ink and style elements is reversed, the styles from the 


tss_styles.css file are loaded last and given precedence. 
To avoid confusion, always 


place your embedded 
styles after any links to Inline Styles 


external style sheet files so 
that the embedded styles 


The very last styles to be interpreted by the browser are inline styles, which are styles 
always have precedence. 


applied directly to specific elements using the following style attribute 


<element style="propertyl: valuel;property2: value2; .."> 
content 
</element> 
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Not all properties are 
inherited; for example, a 
style property that defines 
text color has no meaning 
for an inline image. 


where the property: value pairs define the styles, which are applied directly to that 
element. Thus, the following inline style sets the appearance of the h1 heading to red 
text centered on the page: 


<hl style="color: red; text-align: center;"> 
Tri and Succeed Sports 
</hl> 


This style applies only to this particular h1 heading and not to any other h1 heading 
on the page or in the website. The advantage of inline styles is that it is clear exactly 
what page element is being formatted; however, inline styles are not recommended in 
most cases because they make it difficult to manage your website design. For example, 
if you used inline styles to format all of your headings, you would have to locate all 

of the h1 through hé elements in all of the pages within the entire website and add 
style attributes to each tag. This would be no small task on a large website containing 
hundreds of headings spread out among dozens of pages. Likewise, it would be a 
nightmare if you had to modify the design of those headings at a later date. Thus, the 
recommended practice is to always use external style sheets that can be applied across 
the entire website. 


Style Specificity and Precedence 


With so many different style rules to be applied to the same document, there has to 

be an orderly method by which conflicts between those different rules are resolved. 
You've already learned that the style that is defined last has precedence, but that is 

not the whole story. Another important principle is that the more specific style rule 

has precedence over the more general style rule. Thus, a rule applied to a paragraph 
takes precedence over a rule applied to the entire page, and a rule applied to a section 
of text within that paragraph takes precedence over the rule for the paragraph. In 

the following style rules, the color of the text in all paragraphs is set to red, taking 
precedence over the color black applied to the rest of the text in the page: 


p {color: red;} 
body {color: black; } 


Note that specificity is only an issue when two or more styles conflict, as in the 
example above. When the style rules involve different properties (such as color and 
size), there is no conflict and both rules are applied. If two rules have equal specificity 
and thus equal importance, then the one that is defined last has precedence. 


Style Inheritance 


An additional factor in how style rules are interpreted is that styles are passed from 
a parent element to its children in a process known as style inheritance. Thus, the 
following style rule sets the color of article text to blue and that rule is passed to 
any paragraph, header, footer, or other element nested within an article element. In 
addition, the paragraph text within that article is centered: 


article {color: blue; } 
p {text-align: center; } 


The final rendering of any page element is the result of styles drawn from rules 
across multiple style sheets and from properties passed down from one element to 
another within the hierarchy of page elements. These style sheets and style rules form 
the “cascade” of styles in Cascading Style Sheets. 
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Browser Developer Tools 


i the idea of multiple style sheets and multiple style rules is intimidating, there are 
tools available to help you manage your styles. Most browsers include developer tools 
In most browsers, you can : . 
allowing the designer to view HTML code, CSS styles, and other parts of the web page. 


quickly access information : : : 
These developer tools make it easier for the designer to locate the source of a style that 


about a specific page 


element by right-clicking has been applied to a specific page element. 
the element in the browser Each browser's developer tools are different and are constantly being updated and 
Ele ony cule Te nereet i improved with every new browser version. However, to give you the flavor of the tools 


Inspect Element from the 
pop-up menu. 


you have at your disposal, you'll examine both the HTML code and the CSS style sheet 
under the developer tools built into your desktop browser. Note that the figures in the 
steps that follow use the desktop version of the Google Chrome browser. 


Accessing the browser developer tools: 
BD 1. Return to the tss_home.htnll file in your browser. 
BD 2. Press F12 to open the developer tools window. 


Trouble? If pressing F12 doesn’t open the developer tools, your 
browser might need a different keyboard combination. In Safari for the 
Macintosh, you can view the developer tools by pressing ctrl+shift+! or 
command-+toption+l. 


BD 3. From the hierarchical list of elements in the web page, click the <body> tag if 
it is not already selected. 


Figure 2-6 shows the layout of panes using the developer tools under 
Google Chrome for the desktop. 


Figure 2-6 Developer tools in Google Chrome 
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As shown in Figure 2-6, the styles pane lists the styles that have been 
applied to the body element. Note that the margin property from the 
browser style sheet has been crossed out, indicating that this browser style 
has been superseded by a style defined in the external style sheet. 
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INSIGHT 


Trouble? Every browser has a different set of developer tools and 
configurations. Your tools might not resemble those shown in Figure 2-6. 


D 4. Take some time to explore the content and styles used in the other page 
elements by selecting the elements tags from the hierarchical list of 
elements. 


D 5. Press F12 again to close the developer tools window. 


Trouble? In Safari, you can close the developer tools by pressing ctrl+shift+| 
or by command+option+l. 


In this and future tutorials, you may find that your browser’s developer tools are 
a great aid to working through your website designs. Most developer tools allow the 
user to insert new style rules in order to view their immediate impact on the page’s 
appearance; however, these modifications are only applied during the current session 
and are not saved. So, once you find a setting that you want to use, you must enter it in 
the appropriate style sheet for it to take effect permanently. 


Defining an !important Style 


You can override the style cascade by marking a particular property with the following 
!important keyword: 


property: value !important; 


The following style rule sets the color of all h1 headings to orange; and because this 
property is marked as important, it takes precedence over any conflicting styles found 
in other style sheets. 


hil {color: orange !important; } 


The !important keyword is most often used in user-defined style sheets in which 
the user needs to substitute his or her own styles in place of the designer's. For 
example, a visually impaired user might need to have text displayed in a large font 
with highly contrasting colors. In general, designers should not use the ! important 
keyword because it interferes with the cascade order built into the CSS language. 


Creating a Style Sheet 


Now that you've reviewed some history and concepts behind style sheets, you'll start 
creating your own. You should usually begin your style sheets with comments that 
document the purpose of the style sheet and provide information about who created 
the document and when. 


Writing Style Comments 
Style sheet comments are entered as 


/ * 
comment 


sa 
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where comment is the text of the comment. Because CSS ignores the presence of white 
space, you can insert your comments on a single line to save space as: 


/* comment */ 


Create a style sheet file now, placing a comment with your name and the current 
date at the top of the file. 


Writing a Style Comment: 


BD 1. Use your editor to open the tss_styles_txt.css file from the html02 » tutorial 
folder. 


D 2. Within the comment section at the top of the file, enter your name following 
the Author: comment and the date following the Date: comment. 


D 3. Save the file as tss_styles.css. 


D 4. Return to the tss_home.htnll file in your HTML editor and add the following 
link element directly before the closing </head> tag. 


<link href="tss_styles.css" rel="stylesheet" /> 


BD 5. Close the tss_home.html file, saving your changes. 


Defining the Character Encoding 


As with HTML files, it is a good idea in every CSS document to define the character 
encoding used in the file. In CSS, you accomplish this using the following @charset rule 


@charset "encoding"; 


where encoding defines the character encoding used in the file. Add the @charset 
rule to the tss_styles.css style sheet file now, specifying that the UTF-8 character set is 
used in the CSS code. 


To indicate the character encoding: 
BD 1. Return to the tss_styles.css file in your editor. 
Dd 2. Directly above the initial comment section, insert the line: @charset "utf-8";. 


Figure 2-7 highlights the new code in the style sheet. 


— Figure2-7 J Adding the @charset rule and style comments 
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The @import statement 
must always come before 
any other style rules in the 
style sheet. 


You can view the complete 
list of CSS color names by 
opening the demo_color_ 
names.html file in the 
html02 » demo folder. 


Note that only one @charset rule should appear in a style sheet and it 
should always precede any other characters, including comments. 


BD 3. Save your changes to the file. 


Importing Style Sheets 


The @charset rule is an example of a CSS at-rule, which is a rule used to send 
directives to the browser indicating how the contents of the CSS file should be 
interpreted and parsed. Another at-rule is the following @import used to import the 
contents of a style sheet file 


@import url(url); 


where url is the URL of an external style sheet file. 

The @import is used to combine style rules from several style sheets into a 
single file. For example, an online store might have one style sheet named basic.css 
containing all of the basic styles used in every web page and another style sheet named 
sales.css containing styles used with merchandise-related pages. The following code 
imports styles from both files: 


@import url (basic.css) ; 
@import url(sales.css) ; 


Using multiple @import rules in a CSS file has the same impact as adding multiple 
link elements to the HTML file. One advantage of the @import rule is that it simplifies 
your HTML code by placing the decision about which style sheets to include and 
exclude in the CSS file rather than in the HTML file. 


Working with Color in CSS 


The first part of your style sheet for the Tri and Succeed Sports website will focus on 
color. If you’ve worked with graphics software, you’ve probably made your color 
selections using a graphical interface where you can see your color options. Specifying 
color with CSS is somewhat less intuitive because CSS is a text-based language and 
requires colors to be defined in textual terms. This is done through a color name or a 
color value. 


Color Names 


You've already seen from previous code examples that you can set the color of page 
text using the color property along with a color name such as red, blue, or black. CSS 
supports 147 color names covering common names such as red, green, and yellow to 
more exotic colors such as ivory, orange, crimson, khaki, and brown. 
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= Written Communication: Communicating in Color 


PROSKILLS 


Humans are born to respond to color. Studies have shown that infants as young as 
two months prefer bright colors with strong contrast to drab colors with little contrast, 
and market research for clothing often focuses on what colors are “in” and what colors 
are passé. 

Your color choices can impact the way your website is received so you want to 
choose a color scheme that is tailored to the personality and interests of your target 
audience. Color can evoke an emotional response and is associated with particular 
feelings or concepts, such as 


¢ red—assertive, powerful, sexy, dangerous 

° pink—innocent, romantic, feminine 

e black—strong, classic, stylish 
gray—business-like, detached 

© yellow—warm, cheerful, optimistic 

e blue—consoling, serene, quiet 

° orange—triendly, vigorous, inviting 

¢ white—clean, pure, straightforward, innocent 


If your website will be used internationally, you need to be aware of how cultural 
differences can affect your audience's response to color. For instance, white, which 
is associated with innocence in Western cultures, is the color of mourning in China; 
yellow, which is considered a bright, cheerful color in the West, represents spirituality in 
Buddhist countries. 


RGB Color Values 


Because a palette of 147 color names is extremely limited for graphic design and color 
names can be constricting (how do you name a color that is slightly redder than ivory 
with a tinge of blue?), CSS also supports color values, in which the color is given by an 
exact numeric representation. CSS supports two types of color values: RGB values and 
HSL values. 

RGB color values are based on classical color theory in which all colors are 
determined by adding three primary colors—red, green, and blue—at different levels of 
intensity. For example, adding all three primary colors at maximum intensity produces 
the color white, while adding any two of the three primary colors at maximum 
intensity produces the trio of complementary colors—yellow, magenta, and cyan (see 
Figure 2-8). 
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Figure 2-8 Color addition in the RGB color model 


magenta 


Varying the intensity of the three primary colors extends the palette to other colors. 
Orange, for example, is created from a high intensity of red, a moderate intensity of 
green, and a total absence of blue. CSS represents these intensities mathematically as a 
set of numbers called an RGB triplet, which has the format 


rgb(red, green, blue) 


TRY. LT. where red, green, and blue are the intensities of the red, green, and blue components 


You can explore the RGB 
color values using the 
demo_rgb.html file in the 
html02 » demo folder. 


of the color. Intensities range from 0 (absence of color) to 255 (maximum intensity); 
thus, the color white has the value rgb(255, 255, 255), indicating that red, green, and 
blue are mixed equally at the highest intensity, and orange is represented by rgb(255, 
165, 0). RGB triplets can describe 256? (16.7 million) possible colors, which is a 
greater number of colors than the human eye can distinguish. 

RGB values are sometimes expressed as hexadecimal numbers where a hexadecimal 
number is a number expressed in the base 16 numbering system rather than in the 
commonly used base 10 system. In base 10 counting, numeric values are expressed 
using combinations of 10 characters (0 through 9). Hexadecimal numbering includes 
these ten numeric characters and six extra characters: A (for 10), B (for 11), C (for 12), 
D (for 13), E (for 14), and F (for 15). For values above 15, you use a combination of 
those 16 characters. For example, the number 16 has a hexadecimal representation of 
10, and a value of 255 has a hexadecimal representation of FF. The style value for color 
represented as a hexadecimal number has the form 


#redgreenblue 


where red, green, and blue are the hexadecimal values of the red, green, and blue 
components. Therefore, the color yellow could be represented either by the RGB triplet 


rgb (255,255, 0) 
or more compactly as the hexadecimal 


#FFFFOO 
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Most HTML editors and graphic programs provide color picking tools that allow the 
user to choose a color and then copy and paste the RGB or hexadecimal color value. 
Hexadecimal color values have the advantage of creating smaller style sheets, which 
can be loaded faster—an important consideration for mobile devices. However, for 
others viewing and studying your style sheet code, they are more difficult to interpret 
than RGB values. 

Finally you can enter each component value as a percentage, with 100% 
representing the highest intensity. In this form, you would specify the color orange with 
the following values 


rgb(100%, 65%, 0%) 


which is equivalent to the rgb(255, 165, 0) value described above. 


HSL Color Values 


HSL color values are based on a color model in which each color is determined 
by its hue, saturation, and lightness. Hue is the tint of the color and is usually 
represented by a direction on a color wheel. Hue values range from 0° up to 360°, 
where 0° matches the location of red on the color wheel, 120° matches green, 
and 240° matches blue. Saturation measures the intensity of the chosen color and 
ranges from 0% (no color) up to 100% (full color). Finally, lightness measures the 
brightness of the color and ranges from 0% (black) up to 100% (white). Figure 2—9 
shows how setting the hue to 38°, the saturation to 90%, and the lightness to 60% 
results in a medium shade of orange. 


Figure 2-9 Defining the color orange under the HSL color model 


hsl(38, 90%, 60%) 


100% 


50% 


lightness varies 
from 0% to 100% 


saturation varies 
from 0% to 100% 


hue expressed as degrees 
on the color wheel 


Color values using the HSL model are described in CSS using 


hsl(hue, saturation, lightness) 


TRY. LT. where hue is the tint of the color in degrees, saturation is the intensity in percent, 


and lightness is the brightness in percent of the color. Thus, a medium orange color 


You can explore the HSL 
would be represented as 


color values using the 
demo_hsl.html file in the 


html02 » demo folder. hsl(38, 90%, 60%) 
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Graphic designers consider HSL easier to use because it allows them to set the initial 
color based on hue and then fine-tune the saturation and lightness values. This is more 
difficult in the RGB model because you have to balance three completely different 
colors to achieve the right mix. For example, the RGB equivalent to the color orange in 
Figure 2-9 would be the color value rgb(245, 177, 61); however, it’s not immediately 
apparent why that mixture of red, green, and blue would result in that particular shade 
of orange. 


Defining Semi-Opaque Colors 


Colors can also be semi-opaque by setting the color’s opacity, which defines how solid 
the color appears. The color’s opacity can be specified using either of the following 
rgba and hs1la properties 


rgba(red, green, blue, opacity) 
hsla(hue, saturation, lightness, opacity) 


TRY. LT. where opacity is the opacity of the color ranging from 0 (completely transparent) up 


ssc areu areata to 1.0 (completely opaque). For example, the following style property uses the HSL 
Pei Galen wali color model to define a medium orange color with an opacity of 0.7: 


using the demo_rgba.html 
and demo_hsla.html files in 
the html02 » demo folder. 


hsla(38, 90%, 60%, 0.7) 


The final appearance of a semi-opaque color is influenced by the colors behind it on 
the page. Displayed against a white background, a medium orange color would appear 
in a lighter shade of orange because the orange will appear mixed with the background 
white. 

On the other hand, the same orange color displayed on a black background would 
appear as a darker shade of orange. The advantage of using semi-transparent colors 
is that it makes it easier to create a color theme in which similarly tinted colors blend 
with other colors on the page. 


Setting Text and Background Colors 


Now that you've studied how CSS works with colors, you can start applying color to 
some of the elements displayed on the Tri and Succeed Sports website. CSS supports 
the following styles to define both the text and background color for each element on 
your page 


color: color; 
background-color: color; 


where color is either a color value or a color name. 

Alison wants to use an HSL color value (27, 72%, 72%) to set the background of 
the document to orange and she would like the text of the home page to appear in a 
medium gray color on an ivory background. The style rules to modify the appearance of 
these document elements are 


html { 
background-color: hs1(27, 72%, 72%); 
} 
body { 
color: rgb(91, 91, 91); 
background-color: ivory; 
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The html selector in this code selects the entire HTML document so that any part 
of the browser window background that is not within the page body will be displayed 
using the HSL color (27, 72%, 72%). 

Within the page body, Alison wants the h1 and h2 headings displayed in white text 
on dark and lighter orange colors using the RGB color values (222, 128, 60) and (235, 
177, 131) respectively. The style rules are 


hi { 

color: white; 

background-color: rgb(222, 128, 60); 
} 
h2 { 

color: white; 

background-color: rgb(235, 177, 131); 


Setting Text and Background Color 
¢ To set the text color of an element, use the following property 
e@lloies eolloiey 


¢ To set the background color of an element, use the following property 


REFERENCE 


background-color: color; 


where color is a color name or a color value. 


Next, add style rules for text and background colors to the tss_styles.css file. 


To define background and text colors: 


D1. Add the following code within the HTML and Body Styles section: 


fi escesnersemmen 
rt 
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BD 2. Add the following style rules within the Heading Styles section: 


Almost 8% of all men hl { 
and 0.5% of all women 


color: white; 
have some sort of color 


indasss, Beeaves background-color: rgb(222, 128, 60); 


redgreen color blindness } 
is the most common type 
of color impairment, you h2 { 


should avoid using red text 
on a green background 
and vice versa. 


color: white; 
background-color: rgb(235, 177, 131); 


} 


Figure 2-10 highlights the new style rules. 


HT B 


Figure 2-10 Adding text and background colors 
~~ | selects the HTML 
element 


sets the document html { 
background to a || » background-color: hsl(27, 72%, 72%); 
medium orange color ) } are eee 
element 
body { 
displays page body color: rgb(91, 91, 91); 
nas Sa an ivory backgro un d-coltlor: 1 vory; 
ackgroun } |; : 


selects all h1 headings 


. - hi { 
displays h1 heading color: white; 


text in white on a dark 


orange background background-color: rgb(222, 128, 60); 
1 
= selects all h2 headings 


h2 { 
color: white; 
background-color: rgb(235, 177, 131); 


displays h2 heading text 
in white on a medium 
orange background 


% 
Sj 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Figure 2-11 shows the appearance of the page under the new 
styles. 
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Figure 2-11 Text and background colors in the web page 
white h1 heading j) / if / 


text on a dark orange 
background 


Links About TSS omments 


i and Secceed 


. Sports h 
+ Running a firwt close t 

+ Cycling 
* Smamumag 
e 
° 
° 


browser window Actne com 
. Runner's World 
background is sadniaiiianien 


medium orange — 


mg Magazme 


* Swenumng World 
+ USA Swemomng 


white h2 heading * tuathlon org 
text on a light ton 
orange background shades dn Wouter instruction starts soon, Get s jump ou 
+ Toathlon Calendar ropebertairyartcac rey ol cream hae fo ; 
4 Tk - lete coms “ eters | 4 poug we lor dale * poles 


© Ysbrand Cosijn/Shutterstock.com; 

© Charles T. Bennett/Shutterstock.com; 

© ostill/Shutterstock.com; 

© Monkey Business Images/Shutterstock.com page body style shows 
gray text on an ivory 
background 


Trouble? The text of hypertext links in the left column is blue, using the 
default browser styles applied to hypertext links. You'll modify these colors 
later in the tutorial. 
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o 


Problem Solving: Choosing a Color Scheme 


One of the worst things you can do to your website is to associate interesting and 
useful content with jarring and disagreeable color. Many designers prefer the HSL 
color system because it makes it easier to select visually pleasing color schemes. 
The following are some basic color schemes you may want to apply to websites you 
design: 


PROSKILLS », 


® monochrome—a single hue with varying values for saturation and lightness; this 
color scheme is easy to manage but is not as vibrant as other designs 

© complementary—two hues separated by 180° on the color wheel; this color scheme 
is the most vibrant and offers the highest contrast and visual interest, but it can be 
misused and might distract users from the page content 

¢ triad—three hues separated by 120° on the color wheel; this color scheme provides 
the same opportunity for pleasing color contrasts as a complementary design, but it 
might not be as visibly striking 

° tetrad—four hues separated by 90° on the color wheel; perhaps the richest of all 
color schemes, it is also the hardest one in which to achieve color balance 

¢ analogic—three hues close to one another on the color wheel in which one color is 
the dominant color and the other two are supporting colors used only for highlights 
and nuance; this scheme lacks color contrasts and is not as vibrant as other color 
schemes 


TRY. IT. Once you have selected a color design and the main hues, you then vary those 


You can explore color colors by altering the saturation and lightness. One of the great advantages of style 
schemes with the demo_ sheets is that you can quickly modify your color design choices and view the impact of 


anal.html, demo_comp. those changes on your page content. 
html, demo_mono.html, 

demo_split.html, and 

demo_triad.html files in the 

html02 » demo folder. 


Employing Progressive Enhancement 


The HSL color you used for the html selector was introduced with CSS and thus it is 
not supported in very old browsers. If this is a concern, you can insert the older style 
properties first followed by the newer standards. For example, the following style rule 
sets the background color of the html element to a lighter orange using the RGB value 
first, and then the equivalent HSL value. 


html { 
background-color: rgb(235, 177, 131); 
background-color: hs1(27, 72%, 72%); 


} 


Old browsers that don’t recognize the HSL color value will ignore it and use the 
RGB value, while browsers that recognize both values will use the one that is defined 
last, which in this case is the HSL value. This is an example of a technique known as 
progressive enhancement, which places code conforming to older standards before 
newer properties, providing support for old browsers but still allowing newer standards 
and techniques to be used by the browsers that support them. 

You show Alison the work you’ve done on colors. She’s pleased with the ease of 
using CSS to modify the design and appearance of elements on the Tri and Succeed 
Sports website. In the next session, you'll continue to explore CSS styles, focusing on 
text styles. 
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" Session 2.1 Quick Check 


1. Which styles are applied directly to elements within an HTML file? 
a. browser styles 


b. inline styles 
c. embedded styles 
d. external styles 


2. What keyword do you add to a style property to override style precedence and 


style inheritance? 
a. cascade! 


REVIEW 


b. use! 
c. important! 
d. import! 
3. CSS comments are entered as: 
a. /* comment */ 
b. ! comment ! 
c. /* comment 
d. <!--- comment ---> 
4. Which of the following values is used to represent the color red? 
a. rgb(10, 0, 0) 
b. rgb(1000, 0, 0) 
c. rgb(255, 0, 0) 
d. rgb(0, 255, 0) 
5. What is the hue associated with the color value hsl(90, 100%, 50%)? 
a. 90 
b. 100% 
c. 50% 
d. Cannot be determined by the color value 


6. What is the vendor prefix associated with the Google Chrome browser? 


a. -chrome- 
b. -google- 
c. -moz- 

d. -webkit- 


7. What is the HSL color value for red displayed with the highest saturation and 
lightness and with 50% transparency? 
a. hsl(O, 100%, 100%, 0.5) 
b. hsl(255, 100%, 100%, 0.5) 
c. hsla(O, 100%, 100%, 0.5) 
d. hsla(0.5, 0, 100%, 100%) 


8. What is the style to display h1 headings in green text on a yellow background? 
a. hi {color: green; background-color: yellow; } 
b. hi {color: green; bgcolor: yellow; } 
c. hi {text: green; background: yellow; } 
d. hi {textColor: green; backgroundColor: yellow; } 
9. Which of the following matches the color blue? 
a. rgb(0, 0, 255) 
b. hsl(240, 100%, 50%); 
c. rgba(0, 0, 255, 1) 
d. All of the above 
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Session 2.2 Visual Overview: 


The @£ont-face rule font-face { 
imports a web font = <The . ° 
Teo he ayie tear font family: Quicksand; 
src: url('Quicksand-Regular.woff') format('woff'), 
urL('Quicksand-Regular.ttf') format('truetype') ; 


} 
body { 
color: rgb(91, 91, 91); 
( = . 
The font-family background-color: ivory; 


property lists the 1+» font-family: Verdana, Geneva, sans-serif; 
possible fonts used ? ? 5) 


for the element text. ) } 


—. . The em unit is a relative unit 

The font-size hl_{font-size: 2.2em;} of length that expresses a 

h ae : i i i 

property sets the text h2 {font-size: 1.5em : } size relative to the font size 
size in absolute or 


of the containing element. 


relative units. 
4 


hi, h2 { 
> : . 7 
(The letter-spacing font-family: Quicksand, Verdana, Geneva, sans-serif; 
property sets the | | y letter-spacing: 0.1em; 
kerning or space P & The aside blockquote 
between letters. } selector selects blockquote 
EEE 


elements that are descendants 


: of the aside element. 
aside blockquote { y 


color: rgb(232, 165, 116); 


~ 
} ee The nav > ul selector selects 
ul elements that are direct 
children of the nav element. 


The line-height nav > ul { 
property sets the See = : é 
height of the lines of Uine-height: 2em; 


text in the element. } 


body > footer address { 

background-color: rgb(222,128,60) ; 

color: rgba(255, 255, 255, 0.7); 

font: normal small-caps bold 0.9em/3em 
The text-align Quicksand, Verdana, Geneva, sans-serif; 
ploberiyseraule text-align: center; 


horizontal alignment 
of the text. } 


© Monkey Business Images/Shutterstock.com 
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CSS Typography 


The h1 heading is displayed 
in the Quicksand font with 
a font size of 2.2em and 
letter spacing of 0.1em. 


Comments 


ete Since 2002, Tri and Succeed : 
2 : Since , Tri and Succee 3 
papconm Sports has provided Austin with a 2 
* Cycling first class training center for athletes 2 
* Swimming of all abilities and goals. We ie 
© Active.con specialize in helping you reach your x 
full potential. You tell us what you or 
* Runners world want to do; we work to fulfill your e 
* endomendo.com needs. g 
oo 
* Sava Want to swim? Great! Interested in 3 
* Bicycling Magazine improving your cycling? Fantastic! a) 
* YeloNews Want to tackle a triathlon? We're 3 
‘ there for you: before, during, and 5 
Bicesie ent after the race. Or do you just want 2 
* Sxim Smooth to get more fit? We are on it. We Sen 
* Swimming World Scakelaeh our instruction to match Body boxe displayed 
. USAS : your goals. And you will finish what in a Verdana font. 
you start 
* triathlon.org 
* susatriathlon.org 


Winter instruction starts soon. Get a jump on your summer 


+ Tilathion Calenda goals by joining us for individual or group instruction in 
* Tilathlete com ¢ Running: We start with the basics to help you run faster 
* Trifyel.com and farther than you ever thought possible without aches 


and pains. 

e Cycling: The indoor bike trainers at TSS include 
everything you need to refine your technique, stamina, 
and power for improved results on the road. 

¢ Swimming: The open water swim can be one of the most 
frightening sports to master. Our classes begin with basic 
techniques so that your swim can be very enjoyable, and 
not a chore. 


Navigation list is 
double-spaced with 
a line height of 2em. 


Contact us to set up individual instruction and assessment 


Our Philosoph 


Athletes are the foundation of every successful training 
program. The best coach is an experienced guide who begins 
with each athlete's hopes, dreams and desires and then tallors 
4 training plan based on that individuals’s current fitness and 
lifestyle. Since 2002, TSS has helped hundreds of individuals 
achieve success In many fitness areas. The winner Is not the 
one who finishes first but anyone who starts the race and 
perseveres. Join us and begin exploring the possible. 


Page footer is centered and The h2 headings are displayed 
displayed in small caps as specified in the Quicksand font with a 
by the body > footer address font size of 1.5em and letter 


style rule. spacing of 0.1em. 
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Exploring Selector Patterns 


The following style rule matches every h1 element in the HTML document, regardless 
of its location within the page: 


h1 { 
color: red; 


} 


Often, however, you will want your style rules to apply to elements only placed within 
specific locations, such as h1 headings found within articles but not anywhere else. To 
direct a style rule to an element at a specific location use selector patterns to match 
only those page elements that match a specified pattern. 


Contextual Selectors 


The first selector pattern you'll examine is a contextual selector, which specifies 

the context under which a particular page element is used. Context is based on the 
hierarchical structure of the document, which involves the relationships between a 
parent element containing one or more child elements and within those child elements 
several levels of descendant elements. A contextual selector relating a parent element 
to its descendants has the following pattern 


parent descendant { styles } 


where parent is a parent element, descendant is a descendant of that parent, and 
styles are styles applied to the descendant element. For example, the following style 
rule sets the text color of h1 headings to red but only when those headings are nested 
somewhere within the header element: 


header h1 { 
color: red; 


} 


As shown in the following code, the descendant element does not have to be a 
direct child of the parent; in fact, it can appear several levels below the parent in the 
hierarchy. This means that the above style rule matches the h1 element in the following 
HTML code: 


<header> 
<div> 
<hil>Tri and Succeed Sports</h1> 
</div> 
</header> 


The hi element is a direct child of the div element; but, because it is still a descendant 
of the header element, the style rule still applies. 

Contextual selectors follow the general rule discussed in the last session; that is, the 
more specific style is applied in preference to the more general rule. For instance, the 
following style rules would result in h1 headings within the section element being 
displayed in red while all other h1 headings would appear in blue: 


section hl {color: red; } 
h1 {color: blue; } 


Figure 2-12 describes some of the other contextual selectors supported by CSS. 
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Figure 2-12 Contextual selectors 


Selector Description 

* Matches any element 

elem Matches the element elem located anywhere in the document 

elem1, elem2, ... Matches any of the elements elem1, elem2, etc. 

parent descendant Matches the descendant element that is nested within the parent 
element at some level 

parent > child Matches the child element that is a child of the parent element 

elem1 + elem2 Matches elem2 that is immediately preceded by the sibling 


element elem1 


elem1 ~ elem2 Matches elemz2 that follows the sibling element elem1 


To match any element, use the wildcard selector with the * character. For example, 
the following style rule matches every child of the article element, setting the text 
color to blue: 


article > * {color: blue; } 


Sibling selectors select elements based on the elements that are adjacent to them 
in the document hierarchy. The following style rule uses the + symbol to select the h2 
element, but only if it is immediately preceded by an hi element: 


h1l+h2 {color: blue; } 


On the other hand, the following style rule uses the ~ symbol to select any h2 
element that is preceded (but, not necessarily immediately) by an hi element: 


hl ~ h2 {color: blue;} 


Figure 2-13 provides additional examples of selectors and highlights in red those 
elements in the document that would be selected by the specified selector. 


Contextual selector patterns 


Pp article p article > p 
body body body 
I 
aa | 


article aside article aside artic! 


aside 


le 
Feade EEN (77) MEN ease] EEE (F7) Ce] eace EIEN (FC 
Ga || ee At) Ce] [P] 


hl + p hl ~ p article > * 
body body body 
I 
ae | 
article aside article aside article aside 
I I 


header|| p p || p ni] [header pe || ep ]l pe h1 red eS Ee Ee h1} | p 
ht] Ew [e ma re ha] [p p | 
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Remember that, because of style inheritance, any style applied to an element 
is passed down the document tree. Thus, a style applied to a header element is 
automatically passed down to elements contained within that header unless that style 
conflicts with a more specific style. 


Using Contextual Selectors 


© To select all elements, use the * selector. 

e To select a single element, use the elem selector, where elem is the name of the 
element. 

e To select a descendant element, use the parent descendant selector where parent 
is a parent element and descendant is an element nested within the parent at some 
lower level. 

e To select a child element, use the parent > child selector. 

¢ To select a sibling element, elem2, that directly follows elem1, use the elem1 + 
elem2 selector. 

° To select a sibling element, elem2, that follows, but not necessarily directly elemz, 
use the elem1 ~ elem2 selector. 


REFERENCE 


Now, you'll create a style rule to change the text color of the customer testimonials 
on the Tri and Succeed Sports home page to a dark orange using the RGB color value 
rgb(232, 165, 116). You'll use a contextual selector to apply the style rule only to block 
quotes that are descendants of the aside element. 


To create style rule with a contextual selector: 


dD 1. If you took a break after the previous session, make sure the tss_styles.css 
file is open in your editor. 


BD 2. Within the Aside and Blockquote Styles section, insert the following style 
rule: 


aside blockquote { 
Ceilereg adel (ASA, iS, alal(5)) p 


} 


Figure 2-14 highlights the new style rule for the blockquote element. 


Figure 2-14 Setting the text color of block quotes 
le 


Aside and Block juote Sty 


sets the text color 
to dark orange 


style applies to block 
quotes nested within 
an aside element 


aside blockquote { 
color: rgb(232, 165, 116); 
} 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Verify that the text of the customer quotes appears in orange. 
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Attribute Selectors 


Contextual selectors can also be based on attributes and attribute values within 
elements. Two attributes, id and class, are often key in targeting styles to specific 
elements. Recall that the id attribute is used to identify specific elements within the 
document. To apply a style to an element based on its id, you use either the selector 


#id 
or the selector 
elem#id 


where id is the value of the id attribute and elem is the name of the element. Because 
ids are supposed to be unique, either form is acceptable but including the element 
name removes any confusion about the location of the selector. For example, the 
selector for the following h1 heading from the HTML file 


<hl id="title">Tri and Succeed Sports</h1> 


can be entered as either #title or h1#title in your CSS style sheet. 

Because no two elements can share the same ID, HTML uses the class attribute to 
identify groups of elements that share a similar characteristic or property. The following 
h1 element and paragraph element both belong to the intro class of elements: 


<hl class="intro">Tri and Succeed Sports</h1> 
<p class="intro"> ... </p> 


To select an element based on its class value, use the selector 
elem.class 


where class is the value of the class attribute. Thus the following style rule displays 
the text of h1 headings from the intro class in blue: 


h1l.intro {color: blue; } 


To apply the same style rule to all elements of a particular class, omit the element 
name. The following style rule displays the text of all elements from the intro class in 


An element can belong to 
: blue: 


several classes by including 

the class names in a space- 

separated list in the class 

attribute. While id and class are the most common attributes to use with selectors, any attribute 
or attribute value can be the basis for a selector. Figure 2-15 lists all of the CSS attribute 
selector patterns based on attributes and attribute values. 


.intro {color: blue; } 


HTML 114 
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Figure 2-15 Attribute selectors 


Selector Selects Example Selects 
elem#id Element elemwith the ID hl#intro The h1 heading with the 
value id id intro 
#id Any element with the ID = #intro Any element with the id 
value id intro 
elem.class All elem elements with p-main All paragraphs belonging 
the class attribute value to the main class 
class 
.class All elements with the class -main All elements belonging 
value class to the main class 
elem[att] All elem elements con- a [href] All hypertext elements 
taining the att attribute containing the href 
attribute 
elemlatt="text”] All elemelements whose alhref="top.html"] All hypertext elements 
att attribute equals text whose href attribute 
equals top. html 
elemlatt~="text"] All elemelements whose alrel~="glossary"] All hypertext elements 
att attribute contains the whose rel attribute 
word text contains the word 
glossary 
elem[att|="text”] All elemelementswhose plid|="first"] All paragraphs whose 
att attribute value is a id attribute starts 
hyphen-separated list with the word first in a 
of words beginning with hyphen-separated list of 
text words 
elem[att*="text”] All elemelements whose alrel*="prev" All hypertext elements 
att attribute begins with whose rel attribute 
text begins with prev 
elem[att$="text"] All elemelements whose alhref$="org" All hypertext elements 
att attribute ends with whose href attribute 
text ends with org 
elen[att*="text"] All elemelements whose alhref*="faq" All hypertext elements 


att attribute contains the 
value text 


whose href attribute 
contains the text string 
faq 


REFERENCE 


Using Attribute Selectors 


© To select an element based on its ID, use the elem#id or #id selector, where elem is 
the name of the element and id is the value of the id attribute. 

e To select an element based on its class value, use the .class or the elem.class 
selectors, where class is the value of the class attribute. 

e To select an element that contains an att attribute, use elem[att]. 

¢ To select an element based on whether its attribute value equals a specified value, 
val, use elemlatt="val"]. 


In the Tri and Succeed Sports home page, the main content is enclosed within an 
article element with the ID about_tss. Alison wants the h1 and h2 heading styles you 
entered in the last session to be applied only to h1 and h2 elements within articles that 
have this particular ID. Revise the style sheet now. 
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To apply an id selector: 
BD 1. Return to the tss_styles.css file in your editor. 


BD 2. Change the selectors for the h1 and h2 elements in the Heading Styles 
section to article#about_tss hl and article#about_tss h2 respectively. 


Figure 2-16 highlights the revised selectors in the style sheet. 


Figure 2-16 Using an id selector 


selects h1 headings 
within an article element /+-s»tarticle#about_tss hi { 
(an the about_tss id i) color: white; 


background-color: rgb(222, 128, 60); 


> 
a 
4 


crs h2 headings 
within an article element }starticle#about_tss h2 { 

with the about_tss id color: white; 

background-color: rgb(235, 177, 131); 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Verify that the design of the h1 and h2 headings is only applied to 
the headings in the about_tss article but not to the other headings on the 


page. 


The article element will be used in other pages in the Tri and Succeed Sports 
website. Alison has provided you with three additional HTML files containing 
descriptions of the services her company offers for runners, cyclists, and swimmers. On 
those pages the article elements have the class attribute with the value syllabus. 
Create style rules for the h1 and h2 elements within the articles on those pages. 


To apply a class selector: 


BD 1. Use your editor to open the tss_run_txt.html, tss_bike_txt.html, and 
tss_swim_txt.html files from the html02 » tutorial folder. Enter your 
name and the date in the comment section of each file and save them as 
tss_run.html, tss_bike.html, and tss_swim.html respectively. 


D = 2. Within each of the three files insert the following 1ink elements directly 
before the closing </head> tag to link these files to the tss_layout.css and 
tss_styles.css files, respectively: 


<link href="tss_ layout.css" rel="stylesheet" /> 
<link href="tss_styles.css" rel="stylesheet" /> 


BD 3. Take some time to study the content and structure of the files. Note that the 
article element has the class attribute with the value syllabus. Save your 
changes to the files. 


D 4. Return to the tss_style.css file in your editor. 
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BD 5. Within the Heading Styles section, add the following style rule to display the 
text of h1 and h2 headings in medium gray on a light purple background: 


article.syllabus hl, article.syllabus h2 { 
background-color: rgb(255, 185, 255); 
(eloplfopar satepoy((abtyal, al(oal, alfo)al)) p 


} 


Figure 2-17 highlights the new style rule in the file. 


Figure 2-17 Using a class selector 


selects h1 and h2 headings 
within article elements of 
the syllabus class 


article.syllabus hi, article.syllabus h2 { 
background-color: rgb(255, 185, 255); 
color: rgb(101, 101, 101); 


displays the content in 
medium gray text on a 
light purple background 


} 


BD 6. Save your changes to the style sheet and then open the tss_run.html file in 
your browser. Figure 2-18 shows the appearance of the h1 and h2 headings 
on this page. 


Figure 2-18 Headings on the running class page 


h1 heading text 
shows medium gray 
on a light purple 
background 


Guided Running and Racing 


h2 heading text 
shows medium gray 
on a light purple 
background 


‘ourse Outline 


D 7. Use the navigation links on the page to view the content and design of 
the cycling and the swimming pages, and then confirm that the h1 and h2 
headings on these pages have similar formats. 


INSIGHT 
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Calculating Selector Specificity 


The general rule in CSS is that the more specific selector takes precedence over the 
more general selector, but the application of this rule is not always clear. For example, 
which of the following selectors is the more specific? 


header h1.top 
vs. 
#main hl 


To answer that question, CSS assigns a numeric value to the specificity of the 
selector using the formula 


(inline, ids, classes, elements) 


where inline is 1 for an inline style and 0 otherwise, ids is 1 for every id in the 
selector, classes is 1 for every class or attribute in the selector, and elements is 1 for 
every element in the selector. For example, the selector ul#links 1i.first would 
have a value of (0, 1, 1, 2) because it references one id value (#links), 1 class value 

(. £irst) and two elements (ul and 13). Specificity values are read from left to right 
with a larger number considered more specific than a smaller number. 

To answer our earlier question: the selector header h1.top has a value of (0, 0, 1, 2) 
but #main h1 has a value of (0, 1, 0, 1) and, thus, is considered more specific because 
0101 is larger than 0012. 

By the way, since every inline style has the value (1, 0, 0, 0), they will always be more 
specific than any style set in an embedded or external style sheet. 


Working with Fonts 


Typography is the art of designing the appearance of characters and letters on a page. 
So far, the only typographic style you’ve used is the color property to set the text 
color. For the rest of this session, you'll explore other properties in the CSS family of 
typographical styles, starting with choosing the text font. 


Choosing a Font 


Text characters are based on fonts that define the style and appearance of each 
character in the alphabet. The default font used by most browsers for displaying text is 
Times New Roman, but you can specify a different font for any page element using the 
following font-family property 


font-family: fonts; 


where fonts is a comma-separated list, also known as a font stack, of specific or 
generic font names. A specific font is a font that is identified by name, such as Times 
New Roman or Helvetica, and based on a font definition file that is stored on the user’s 
computer or accessible on the web. A generic font describes the general appearance of 
the characters in the text but does not specify any particular font definition file. Instead, 
the font definition file is selected by the browser to match the general characteristics of 
the generic font. CSS supports the following generic font groups: 


¢ serif—a typeface in which a small ornamentation appears at the tail end of each 
character 

¢ sans-serif—a typeface without any serif ornamentation 

* monospace—a typeface in which each character has the same width; often used to 
display programming code 
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* cursive—a typeface that mimics handwriting with highly stylized elements and 
flourishes; best used in small doses for decorative page elements 

¢ fantasy—a highly ornamental typeface used for page decoration; should never be 
used as body text 


Because you have no control over which font definition file the browser will 
choose for a generic font, the common practice is to list specific fonts first, in order of 
preference, ending the font stack with a generic font. If the browser cannot find any 
of the specific fonts listed, it uses a generic font of its own choosing. For example, the 
style 


font-family: ‘Arial Black’, Gadget, sans-serif; 


tells a browser to use the Arial Black font if available; if not, to look for the Gadget font; 
and if neither of those fonts are available, to use its own generic sans-serif font. Note 
that font names containing one or more blank spaces (such as Arial Black) must be 
enclosed within single or double quotes. 

Because the available fonts vary by operating system and device, the challenge is 
to choose a font stack limited to web safe fonts, which are fonts that will be displayed 
in mostly the same way in all operating systems and on all devices. Figure 2-19 lists 
several commonly used web safe font stacks. 


Figure 2-19} 2-19 Web safe font stacks 
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page. 
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A general rule for printing is to use sans-serif fonts for headlines and serif fonts for 
body text. For computer monitors, which have lower resolutions than printed material, 
the general rule is to use sans-serif fonts for headlines and body text, leaving serif fonts 
for special effects and large text. 

Currently, the body text for the Tri and Succeed Sports website is based on a serif 
font selected by the browser. You'll add the following font stack for sans-serif fonts, 
which will take precedence over the browser font style rule: 


font-family: Verdana, Geneva, sans-serif; 


As a result of this style rule, the browser will first try to load the Verdana font, followed 
by the Geneva font. If both of these fonts are unavailable, the browser will load a 
generic sans-serif font of its own choosing. Add this font family to the style rule for the 
page body. 
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To specify a font family for the page body: 


BD 1. Return to the tss_styles.css file in your editor. 


D2. Add the following style to the style rule for the body element: 


Figure 2-20 highlights the new style for the body element. 


browser attempts to use the 

Verdana font first, followed color: rgb(91, 91, 91); 

by Geneva, and Uw) ely background-color: ivory; 

generic sans-serif font font-family: Verdang, Geneva, Sansoserihe 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Figure 2-21 shows the revised appearance of the body text using 
the sans-serif font. 


Sans-serif font applied to the home page 


About TSS 


Comments 


Tri and Succeed 
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/y 
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D 4. View the other three pages in the website to verify that the sans-serif font is 
also applied to the body text on those pages. 


Exploring Web Fonts 


Because web safe fonts limit your choices to a select number of fonts that have 
universal support, another approach is to supply a web font in which the definition font 
is supplied to the browser in an external file. Figure 2-22 describes the different web 
font file formats and their current levels of browser support. The format most universally 
accepted in almost all current browsers and on almost all devices is the Web Open 
Font Format (WOFF). 
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Figure 2-22 Web font formats 


Format Description 


Browser 


Embedded A compact form of OpenType fonts 

OpenType (EOT) designed for use as embedded fonts in 
style sheets 

TrueType (TTF) Font standard used on the Mac OS and 
Microsoft Windows operating systems 

OpenType (OTF) — Font format built on the TrueType format 
developed by Microsoft 

Scalable Vector Font format based on an XML vocabulary 

Graphics (SVG) designed to describe resizable graphics 
and vector images 

Web Open Font The W3C recommendation font format 

Format (WOFF) based on OpenType and TrueType with 
compression and additional metadata 


Internet Explorer (IE) 


IE, Firefox, Chrome, Safari, Opera 
IE, Firefox, Chrome, Safari, Opera 


Safari 


IE, Firefox, Chrome, Safari, Opera 


Web font files can be downloaded from several sites on the Internet. In many cases, 
you must pay for their use; in some cases, the fonts are free but are licensed only for 
non-commercial use. You should always check the EULA (End User License Agreement) 
before downloading and using a web font to make sure you are in compliance with the 
license. Finally, many web fonts are available through Web Font Service Bureaus that 
supply web fonts on their servers, which page designers can link to for a fee. 

The great advantage of a web font is that it gives the author more control over the 
fonts used in the document; the disadvantage is that it becomes another file for the 
browser to download, adding to the time required to render the page. This can be a 
huge issue with mobile devices in which you want to limit the number and size of files 


downloaded by the browser. 


The @font-face Rule 


To access and load a web font, you add the following @font - face rule to the style 


sheet 


@font-face { 
font-family: name; 
sre: url('urll') format('texti'), 
url('url2') format('text2'), 
descriptori1: valuel; 
descriptor2: value2; 


} 


where name is the name of the font, uri is the location of the font definition file, text 


It is considered best 
practice to always include 


is an optional text description of the font format, and the descriptor: value pairs are 
optional style properties that describe when the font should be used. Note several font 


a format value to alertthe definition files can be placed in a comma-separated list, allowing the browser to pick the 
browser about the font’s file format it supports. For example, the following @font - face rule defines a font named 
format so that it doesn’t Gentium installed from either the Gentium.woff file or if that fails, the Gentium.ttf file: 


download a font definition 
file it can’t display. @font-face { 
font-family: Gentium; 


src: url('Gentium.woff') format('woff'), 


url('Gentium.ttf') format ('truetype') ; 
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If the style sheet includes instructions to display a web font in italics, boldface, or 
other variants, the browser will modify the font, which sometimes results in poorly 
rendered text. However if the manufacturer has supplied its own version of the 
font variant, you can direct the browser to use that font file. For example, the following 
@font -face rule directs the browser to use the GentiumBold.woff or GentiumBold.ttf 
file when it needs to display Gentium in bold. 


@font-face { 
font-family: Gentium; 
src: url ('GentiumBold.woff') format ('woff'), 
url ('GentiumBold.ttf') format ('truetype') ; 
font-weight: bold; 


} 


Note that the web font is given the same font-family name Gentium, which is the font 
name you use in a font stack. The added descriptor: value pair and font-weight: 
bold declarations tell the browser that these font files should be used with boldface 
Gentium. 

Once you've defined a web font using the efont -face rule, you can include it in a 
font stack. For example, the following style will attempt to load the Gentium font first, 
followed by Arial Black, Gadget, and then a sans-serif font of the browser's choosing: 


font-family: Gentium, 'Arial Black', Gadget, sans-serif; 


Alison decides that the rendering of the Verdana font in the h1 and h2 heading text 
is too thick and heavy. She has located a web font named Quicksand that she is free to 
use under the End User License Agreement and she thinks it would work better for the 
page headings. She asks you to add this font to the style sheet and apply it to all h1 and 
h2 elements. 


To install and use a web font: 
BD 1. Return to the tss_styles.css file in your editor. 


D 2. Directly after the echarset rule at the top of the file, insert the following 


The @font-face rule @font-face rule: 


should be placed at the 
top of the style sheet after 
the @charset rule and 
before any styles that use sre: url('Quicksand-Regular.woff') format('woff'), 


the web font. url ('Quicksand-Regular.ttf') format('truetype'); 


} 


BD 3. At the top of the Heading Styles section, insert the style rule: 


@font-face { 
font-family: Quicksand; 


inal, 1 of 
font-family: Quicksand, Verdana, Geneva, sans-serif; 


} 


Figure 2-23 highlights the code to create and use the Quicksand web font. 
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Figure 2-23 Accessing a web font 


icharset “ut f-8"; name given to 


the web font 
@font-face { WOFF font file 
font-family: Quicksand; 


src: url( 'Quicksand-Regular.woff') format('woff'), 
url('Quicksand-Regular.ttf') format('truetype'); 


} TTF font file 


@font-face 
rule defines 
the web font 


adds the web 
font to the list of 


‘* Heading Stvles */ ‘ 
/* Heading Styles */ available fonts 


style rule for hi, h2 { 


all h1 and h2 font-family: Quicksand, Verdana, Geneva, sans-serif; 
headings § 


BD 4. Save your changes to the file and reload the tss_home.html file in your 
browser. Figure 2-24 shows the revised appearance of the h1 and h2 
headings using the Quicksand web font. 
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INSIGHT 


Using Google Fonts 


Google Fonts (google.com/fonts) hosts a library of free web fonts. After selecting a 
font from the Google Font catalog, you will receive the code for the 1ink element to 
access the font files. For example, the following 1ink element accesses a style sheet 
for a Google font named Monoton: 


<link href="http://fonts.googleapis.com/css?family=Monoton" 
rel="stylesheet"/> 


To use the Monoton font, include the following font - family property in the CSS 
style sheet: 


font-family: Monoton, fantasy; 


Google fonts, like all web fonts, need to be used in moderation because they can 
greatly increase the load times for your website. To help you know when you have 
exceeded a reasonable limit, the Google Fonts page shows a timer estimating the load 
times for all of the fonts you have selected. You can also limit the size of the font file by 
using the &text parameter to specify only those characters you want to download. For 
example, the following link element limits the Monoton font file to only the characters 
found in “TSS Sports”: 


<link href="http://fonts.googleapis.com/css?family=Monoton 
&text=TSS%20Sports" rel="stylesheet" /> 


Note that blank spaces are indicated using the %20 character. If you have a longer 
text string, you can shorten the value of the href attribute by removing duplicate 
characters, as the order of characters doesn't matter. 


Setting the Font Size 


Another important consideration in typography is the text size, which is defined using 
the following font-size property 


font-size: size; 


where size is a length in a CSS unit of measurement. Size values for any of these 
measurements can be whole numbers (0, 1, 2 ...) or decimals (0.5, 1.6, 3.9 ...). Lengths 
(and widths) in CSS are expressed in either absolute units or relative units. 


Absolute Units 


Absolute units are units that are fixed in size regardless of the output device and are 
usually used only with printed media. They are specified in one of five standard units of 
measurement: mm (millimeters), cm (centimeters), in (inches), pt (points), and pc (picas). 
For example, to set the font size of your page body text to a 12pt font, you would apply 
the following style rule: 


body {font-size: 12pt;} 


Note that you should not insert a space between the size value and the unit abbreviation. 


Relative Units 


Absolute units are of limited use because, in most cases, the page designer does not 
know the exact properties of the device rendering the page. In place of absolute units, 
designers use relative units, which are expressed relative to the size of other objects 
within the web page or relative to the display properties of the device itself. 
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The basic unit for most devices is the pixel (px), which represents a single dot on 
the output device. A pixel is a relative unit because the actual pixel size depends on 
the resolution and density of the output device. A desktop monitor might have a pixel 
density of about 96ppi (pixels per inch), laptops are about 100 to 135ppi, while mobile 
phones have dense displays at 200 to 300ppi or more. Typically, most browsers will 
apply a base font size of 16px to body text with slightly larger font sizes applied to h1, 
h2, and h3 headings. You can override these default sizes with your own style sheet. 
The following style rules set the font size of the text on the page body to 10px and the 
font size of all h1 headings text to 14px: 


body {font-size: 10px;} 
hl {font-size: 14px;} 


TRY. IT The exact appearance of the text depends greatly on the device's pixel density. 


You can explore 
typographic styles using 
the demo_css.html file in 
the html02 » demo folder. 


While a 10px font might be fine on a desktop monitor, that same font size could be 
unreadable on a mobile device. 


Scaling Fonts with ems and rems 


Because the page designer doesn’t know the exact properties of the user’s device, the 
common practice is to make the text scalable with all font sizes expressed relative to 
a default font size. There are three relative measurements used to provide scalability: 
percentages, ems, and rems. 

A percentage sets the font size as a percent of the font size used by the containing 
element. For example, the following style rule sets the font size of an h1 heading to 
200% or twice the font size of the h1 heading’s parent element: 


hl {font-size: 200%;} 


The em unit acts the same way as a percentage, expressing the font size relative to 
the font size of the parent element. Thus, to set the font size of h1 headings to twice the 
font size used in their parent elements, you can also use the style rule: 


hl {font-size: 2em; } 


The em unit is the preferred style unit for web page text because it makes it easy to 
develop pages in which different page elements have consistent relative font sizes 
under any device. 

Context is very important with relative units. For example, if the h1 element is 
placed within a body element where the font size is 16px, the h1 heading will have a 
font size twice that size or 32px. On the other hand, an h1 heading nested within an 
article element where the font size is 9px will have a font size of 18px. In general, 
you can think of font sizes based on percentages and em units as relative to the size of 
immediately adjacent text. 

The fact that relative units cascade through the style sheet can lead to confusing 
outcomes. For example, consider the following set of style rules for an h1 element 
nested within an article element in the page body: 


body {font-size: 16px;} 
body > article {font-size: 0.75em;} 
body > article > hl {font-size: lem;} 


Glancing at the style rules, you might conclude that the font size of the h1 element is 
larger than the font size used in the article element (since 1em > 0.75em). However, 
this is not the case: both font sizes are the same. Remember, em unit expresses the 
text size relative to font size used in the parent element and since the h1 heading is 
contained within the article element its font size of 1em indicates that it will have 
the same size used in the article element. In this case, the font size in the article 
element is 75% of 16px or 12 pixels as is the size of h1 headings in the article. 

Because of this confusion, some designers advocate using the rem or root em unit 
in which all font sizes are always expressed relative to the font size used in the html 
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element. Using rems, the following style rule sets the font size of article text to 75% 
of 16 pixels or 12 pixels while the h1 heading size is set to 16 pixels, equal to the font 
size of the html element: 


html {font-size: 16px; } 
article {font-size: 0.75rem;} 
article > hl {font-size: lrem;} 


The rem unit has become increasingly popular with designers as browser support 
grows and its use might possibly replace the use of the em unit as the font size unit of 
choice in upcoming years. 


Using Viewport Units 


Another relative unit is the viewport unit in which lengths are expressed as a 
percentage of the width or height of the browser window. As the browser window is 
resized, the size of text based on a viewport unit changes to match. There are four 
viewport units: vw, vh, vmin, and vmax where 


¢ Ivw = 1% of the browser window width 

¢ Ivh = 1% of the browser window height 

¢ 1vmin = 1vw or 1vh (whichever is smaller) 
© 1vmax = 1vw or 1vh (whichever is larger) 


For example, if the browser window is 1366 pixels wide, a length of 1vw would 
be equal to 13.66px. If the width of the window is reduced to 780 pixels, 1vw is 
automatically rescaled to 7.8 pixels. Auto-rescaling has the advantage that font sizes 
set with a viewport unit will be sized to match the browser window, maintaining 
a consistent page layout. The disadvantage is that page text can quickly become 
unreadable if the browser window becomes too small. 


Sizing Keywords 

Finally, you also can express font sizes using the following keywords: xx-small, 
x-small, small, medium, large, x-large, xx-large, larger, Or smaller. The font 
size corresponding to each of these keywords is determined by the browser. Note that 
the larger and smaller keywords are relative sizes, making the font size of the element 
one size larger or smaller than the font size of the container element. For example, the 
following style rules set the sidebar to be displayed in a small font, while an h1 element 
nested within that aside element is displayed in a font one size larger (medium): 


aside {font-size: small;} 
aside > hl {font-size: larger; } 


Use em units now to set the font size for the h1 and h2 headings, as well as the text 
within the navigation list and the aside element. 


To set font sizes of the page elements: 
BD 1. Return to the tss_styles.css file in your editor. 
BD 2. Add the following style rules directly below the Heading Styles comment to 
define the font sizes for h1 and h2 headings throughout the website: 


hi { 
font-size: 2.2em; 


} 


h2 { 
font-size: 1.5em; 


} 
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D 3. Go to the Aside and Blockquote Styles section and insert the following style 
rule to set the default font size of text in the aside element to 0.8em: 


aside { 
font-size: 0.8em; 


} 


BD 4. Go to the Navigation Styles section and insert the following style rule to set 
the default font size of text in the navigation list to 0.8em: 


nav { 
font-size: 0.8em; 


} 


Figure 2-25 highlights the new font sizes for the website. 


Figure 2-25 Setting font sizes for the website 
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the body text 


aside blockquote { 
color: rgb(232, 165, 116); 


font-size: 0.8em; 
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BD 5. Save your changes to the file and then reload the tss_home.html file in your 
browser. Figure 2-26 shows the revised font sizes of the headings, navigation 
list, and aside element. 


Figure 2-26 Revised font sizes in the About TSS page 
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Note that the text of the h1 heading in the page article is larger than the text in the h1 
headings from the navigation list and the aside element even though all headings have 
a font size of 2.2em. This is because you reduced the default font size of the text in the 
navigation list and aside elements by 80% and thus the h1 headings in those elements 
are also reduced by the same proportion. 


Controlling Spacing and Indentation 


CSS supports styles to control some basic typographic attributes, such as kerning, 
tracking, and leading. Kerning sets the space between characters, while tracking sets 
the space between words. The properties to control an element's kerning and tracking 
are 


letter-spacing: value; 
word-spacing: value; 


where value is the size of space between individual letters or words. You specify these 
sizes with the same units that you use for font sizing. The default value for both kerning 
and tracking is 0 pixels. A positive value increases the letter and word spacing, while 
a negative value reduces the space between letters and words. If you choose to make 
your text scalable under a variety of devices and resolutions, you can express kerning 
and tracking values as percentages or em units. 

Leading sets the space between lines of text and is defined with the following line- 
height property 


line-height: size; 
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You can give multi-line 
titles more impact by 
tightening the space 
between the lines using a 
large font-size along with a 
small line-height. 


where size is a value or a percentage of the font size of the text on the affected lines. If 
no unit is specified, the size value represents the ratio of the line height to the font size. 
The default value is 1.2 or 1.2em so that the line height is 20% larger than the font size. 
By contrast, the following style sets the line height to twice the font size, making the 
text appear double-spaced: 


line-height: 2em; 
An additional way to control text spacing is to set the indentation for the first line of 
a text block by using the following text -indent property 


text-indent: size; 


where size is expressed in absolute or relative units, or as a percentage of the width of 
the text block. For example, an indentation value of 5% indents the first line by 5% of 
the width of the block. The indentation value also can be negative, extending the first 
line to the left of the text block to create a hanging indent. 

Alison suggests you increase the kerning used in the h1 and h2 headings to 0.1em so 
that the letters don’t crowd each other on the page. She also asks that you increase the 
line height of the text of the navigation list to 2em so that the list of links on the home 
page is double-spaced. 


To set font sizes of the page elements: 
BD 1. Return to the tss_styles.css file in your editor. 


D2. In the Heading Styles section, insert the following style as part of the style 
rule for the h1, h2 selector: 


letter-spacing: 0.1lem; 


BD 3. Scroll down to the Navigation Styles section near the bottom of the file and 
add the following style rule for the text of ul elements nested within the nav 
element: 


nav > ul { 
line-height: 2em; 


} 


Figure 2-27 highlights the letter-spacing and line-height styles for the 
website. 
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Figure 2-27 Controlling letter spacing and line height 


ha, ho 
font-family: Quicksand, Verdana, Geneva, sans-serif; 
letter-spacing: 0.1lem; sets the space between 


letters to 0.1em 


Navigation Styles 


nav { 
font-size: ©.8em; 


} 


ney * ul & doubl the list 
i. pa i si Lae eee ouple spaces the IIs 
[ line-height: 2ena—{G hypertect inks ] 


BD 4. Save your changes to the file and then reload the tss_home.html file in your 
browser. Verify that the space between letters in the h1 and h2 headings has 
been increased and the list of links is now double-spaced. 


By increasing the kerning in the headings, you’ve made the text appear less 
crowded, making it easier to read. 


Working with Font Styles 


The style sheet built into your browser applies specific styles to key page elements; for 
instance, address elements are often displayed in italic, headings are often displayed 
in boldface. You can specify a different font style using the following font-style 
property 

font-style: type; 


where type is normal, italic, or oblique. The italic and oblique styles are similar in 
appearance, but might differ subtly depending on the font in use. 
To change the weight of the text, use the following font-weight property 


font-weight: weight; 


where weight is the level of bold formatting applied to the text. CSS uses the 
keyword bold for boldfaced text and normal for non-boldfaced text. You also can 
use the keywords bolder or lighter to express the weight of the text relative to its 
surrounding content. Finally for precise weights, CSS supports weight values ranging 
from 100 (extremely light) up to 900 (extremely heavy) in increments of 100. In 
practice, however, it’s difficult to distinguish font weights at that level of precision. 

You can apply decorative features to text through the following text-decoration 
property 


text-decoration: type; 
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where type equals none (for no decoration), underline, overline, or line-through. 
The text-decoration property supports multiple types so that the following style 
places a line under and over the element text: 


text-decoration: underline overline; 


Note that the text -decoration style has no effect on non-textual elements, such as 
inline images. 

To control the case of the text within an element, use the following text-transform 
property 


text-transform: type; 


where type is capitalize, uppercase, lowercase, Or none (to make no changes 
to the text case). For example, to capitalize the first letter of each word in an element, 
apply the style: 


text-transform: capitalize; 
Finally, CSS supports variations of the text using the font -variant property 
font-variant: type; 


where type is normal (for no variation) or small-caps (small capital letters). Small 
caps are often used in legal documents, such as software agreements, in which the 
capital letters indicate the importance of a phrase or point, but the text is made small 
so as not to detract from other elements in the document. 


Aligning Text Horizontally and Vertically 


Text can be aligned horizontally or vertically within an element. To align the text 
horizontally, use the following text -align property 


text-align: alignment; 


where alignment is left, right, center, or justify (align the text with both the left 
and the right margins). 
To vertically align the text within each line, use the vertical-align property 


vertical-align: alignment; 


where alignment is one of the keywords described in Figure 2-28. 


Figure 2-28 Values of the vertical-align property 


Value Description 

baseline Aligns the baseline of the element with the baseline of the parent element 

bottom Aligns the bottom of the element with the bottom of the lowest element in 
the line 

middle Aligns the middle of the element with the middle of the surrounding content 
in the line 

sub Subscripts the element 

super Superscripts the element 

text-bottom Aligns the bottom of the element with the bottom of the text in the line 

text-top Aligns the top of the element with the top of the text in the line 


top Aligns the top of the element with the top of the tallest object in the line 
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Instead of using keywords, you can specify a length or a percentage for an element 
eo to be vertically aligned relative to the surrounding content. A positive value moves the 
Binerecieccnics loner element up as in the following style that raises the element by half the line height of the 
or raise text vertically, surrounding content: 
but do not resize it. To 
create true subscripts and 
superscripts, you also must 
reduce the font size. 


vertical-align: 50%; 


A negative value drops the content. For example, the following style drops the 
element an entire line height below the baseline of the current line: 


vertical-align: -100%; 


Combining All Text Formatting in a Single Style 


You can combine most of the text and font style properties into the following shorthand 
font property 


font: style variant weight size/height family; 


where style is the font's style, variant is the font variant, weight is the font weight, size 
is the font size, height is the height of each line, and family is the font stack. For example, 
the following style rule displays the element text in italic, bold, and small capital letters 
using Arial or another sans-serif font, with a font size of 1.5em and a line height of 2em: 


font: italic small-caps bold 1.5em/2em Arial, sans-serif; 


You do not have to include all of the values in the shorthand font property; the only 
required values are the size and family values. A browser assumes the default value 
for any omitted property; however, you must place any properties that you do include 
in the order indicated above. 

At the bottom of each page in the Tri and Succeed Sports website, Alison has nested 
an address element within the body footer. The default browser style sheet displays 
address text in italics. Alison suggests that you display the text in a semi-transparent 
bold white font on a dark orange background and centered on the page. She also 
suggests that you use the small-cap font variant to add visual interest, and she wants 
you to increase the height of the address line to 3em. To make your CSS code more 
compact, you'll set all of the font values using the shorthand font property. 


To apply the font property: 
BD 1. Return to the tss_styles.css file in your editor. 
BD 2. Go down to the Footer Styles section and add the following style rule: 


body > footer address { 
background-color: rgb(222,128,60) ; 
Geuloieg (Wireligap Clroileseg scigan(as, ASS, A255 Ood/))F 
font: normal small-caps bold 0.9em/3em 
Quicksand, Verdana, Geneva, sans-serif; 
text-align: center; 


} 


Note that this style rule uses progressive enhancement by placing each color 
rule on its own line so that browsers that do not support semi-transparent 
colors will display the address text in white. Figure 2-29 highlights the style 
rule for the footer. 
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Style rule for the body footer 


displays the text color 
in a semi-transparent 
white or white if 
semi-transparent colors 
are not supported 


applies the style rule to 
the address element 
within the body footer 


sets the background 
color to dark orange 


[* Footer|st vles * 


a 
body > footer address { 


(background-color: rgb(222,128,60) ; 
color: white; 


sets the 


font size 
to 0.9em 


colors rgba(255, 255, 255, 0.7); 
font: normal small-caps bold 0.9em/3em 

Quicksand, Verdana, Geneva, sans-serif; 
text-align: center; 


displays the text ina 
normal bold font with 
small caps 


sets the 
line height 
to 3em 


horizontally 


displays the text in a 
Quicksand, Verdana, 
Geneva, or a default 
sans-serif font 


centers the text 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Figure 2-30 shows the revised appearance of the body footer. 


Figure 2-30 Formatted body footer 


; ee a body footer 


€ 


a 


PROSKILLS 
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Decision Making: Selecting a Font 


HTML and CSS provide several typographic options. Your main goal, however, is 
always to make your text easily readable. When designing your page, keep in mind 
the following principles: 


¢ Keep it plain—Avoid large blocks of italicized text and boldfaced text. Those styles 
are designed for emphasis, not readability. 

¢ Sans-serif vs. serif—Sans-serif fonts are more readable on a computer monitor and 
should be used for body text. Reserve the use of serif, cursive, and fantasy fonts for 
page headings and special decorative elements. 

¢ Relative vs. absolute—Font sizes can be expressed in relative or absolute units. 
A relative unit like the em unit is more flexible and will be sized to match the 
screen resolution of the user's device, but you have more control over your page’s 
appearance with an absolute unit. Generally, you want to use an absolute unit only 
when you know the configuration of the device the reader is using to view your 
page. 

¢ Size matters—Almost all fonts are readable at a size of 14 pixels or greater; however, 
for smaller sizes, you should choose fonts that were designed for screen display, 
such as Verdana and Georgia. If you have to go really small (at a size of only a few 
pixels), you should either use a web font that is specially designed for that purpose 
or replace the text with an inline image. 

¢ Avoid long lines—In general, try to keep the length of your lines to 60 characters or 
fewer. Anything longer is difficult to read. 


When choosing any typeface and font style, the key is to test your selection on a 
variety of browsers, devices, screen resolutions, and densities. Don’t assume that text 
that is readable and pleasing to the eye on your device screen will work as well on 
another device. 


REVIEW 


Alison likes the typographic changes you made to her website. In the next session, 
you'll explore how to design styles for hypertext links and lists, and you'll learn how to 
use CSS to add special visual effects to your web pages. 


Session 2.2 Quick Check 


1. Which of the following selectors is used to match only paragraphs that are 
children of the aside element? 
a. aside p 
b. p 
c. aside > p 
d. All of the above 
2. Which of the following selectors matches an h1 heading with the id 
“topHeading”? 
a. hl#topHeading 
b. hi [id= "topHeading"] 
c. hi 
d. All of the above 
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3. For the following style rules, what is the font size of the h1 heading in pixels? 
body {font-size: 16px; } 
body > article {font-size: 0.75em;} 
body > article > hl {font-size: 1.5em;} 
a. 16px; 
b. 12px; 
c. 18px; 
d. 18.25px; 
4. Which of the following styles will set the font size to 2% of the viewport width? 
a. 2%vw; 
b. 2vw; 
c. 2vmin; 
d. 2%view; 
5. Provide a style rule to remove underlining from hypertext links marked with the 
<a> tag and nested within a navigation list. 
a. nav > a {text-decoration: none; } 
b. nav > a {text-decoration: no-underline; } 
Cc. nav a {text-decoration: none; } 
d. nav a {text-decoration: underline="no"; } 
6. Provide an @font - face rule to create a web font named Cantarell based on the 


font file cantarell.woff and cantarell.ttf. 
a. @font-face { 
font-family: Cantarell; 
sre: url('Cantarell.woff') format ('woff'), 
src: url('Cantarell.ttf') format ('truetype') ; 
} 
b. font-family: Cantarell, cantarell.woff, cantarell.ttf. 
c. Cantarell { 
sre: url('Cantarell.woff') format ('woff'), 
src: url('Cantarell.ttf') format ('truetype') ; 


d. All of the above will work 
7. Which of the following provides a style rule to display all blockquote elements 
belonging to the Reviews class in italic and indented 3em? 
a. Reviews > blockquote { 
font-style: italic; 
indent: 3em; 
} 
b. blockquote#Reviews { 
font-style: italic; 
indent: 3em; 
} 
Cc. blockquote.Reviews { 
font-style: italic; 
text-indent: 3em; 
} 
d. blockquote#Reviews { 
italic: true; 
indent: 3em; 
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8. Which of the following style rules will center the text of all h1 through h6é 
headings with the text displayed at normal weight? 
a. hl - he { 
text-align: center; 
weight: normal; 


b. hi, h2, h3, h4, h5, hoe { 
align: center; 
weight: normal; 

} 

Cc. hl, h2, h3, h4, h5, he { 
text-align: center; 
font-weight: normal; 

} 

d. hi - he { 
text-align: center; 
font-weight: normal; 

} 
9. What style property sets the kerning of the text within an element? 

a. letter-spacing 

b. word-spacing 

c. kerning-size 

d. kerning 
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Session 2.3 Visual Overview: 


The list-style-type 
property defines the 
appearance of the list 
marker. 


The visited pseudo-class 
selects previously visited 
links; the Link pseudo-class 
selects unvisited links. 


r 


{ 
a style-type: no 
~ 


The margin-top 
property sets the margin 


space above the element. |——7—> M@rBin-top: 20px; 


The hover 


links that are hovered text-decoration: 
over; the active 

pseudo-class selects 
\ actively clicked links. 


(Gre first-of-type 
pseudo-class selects the s 

first element type of the List-style~image: 
parent element. 


= 
(ike list-style-image ) 
property is used to 
insert an image for the 
list marker. ’ 4 
Lo List-style-image: 


List-style-image: 


The quotes property 
defines characters for 
| GMeKeton marks. 


The content property 
is used to insert content 
into a page element. 


padding-left: Spx; 


pseudo-class selects color: rgb(151, 1 


went: open-quote; 


none; 


ip LOcunicon. png) ; 


ur L(bikeicon. png) ; 


url (swimicon. png) ; 


mtent: close-quote; 


The nth-of-type 
pseudo-class selects 
the nth element type 
of the parent. 


The last-of-type 
pseudo-class selects 
the last element type 
of the parent element. 


© Monkey Business Images/Shutterstock.com; 


© Courtesy Patrick Carey 


The before and after 
pseudo-elements are 
used to select page 
space before and after 
a page element. 
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Pseudo Elements and Classes 


~ 
Close quote character 

is inserted using the 
content property. 


Style of the link changes 
when the mouse pointer 
hovers over it. 


Open quote character 
is inserted using the 
content property. 


Comments 


Since 2002, Tri and Succeed 
Sports has provided Austin with a 
ave first class training center for athletes 
Swimmin of all abilities and goals. We 

d specialize in helping you reach your 
full potential. You tell us what you 
want to do; we work to fulfill your 
needs, 


Want to swim? Great! Interested in 
improving your cycling? Fantastic! 
Want to tackle a triathlon? We're 
there for you: before, during, and 
after the race. Or do you just want 
to get more fit? We are on It. We 
customize our instruction to match 
your goals. And you will finish what 
you start, 


Monkey Business Images/Shutterstock.com 


This is the first 
li element. “* The coaches at TSS treat 


Winter instruction starts soon. Get a jump on your summer 
goals by joining us for individual or group instruction in: 


as 
u i Running: We start with the basics to help you run faster 
and farther than you ever thought possible without aches - 
and pains. pe 


® Cycling: The indoor bike trainers at TSS include 
everything you need to refine your technique, stamina; 
and power for improved results on the road. 


Top margins at each 
newgroup class are 
set to 20 pixels. 


w Swimming: The open water swim can be one of the most 
frightening sports to master. Our classes begin with basic 
techniques so that your swim can be very enjoyable, and 


This is the last 
li element. 


An image is used 
to mark each of the 
three list markers. 


not a chore. 
This is the second 
li element. 
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Formatting Lists 


In this session, you'll explore how to use CSS to create styles for different types of lists 
that you learned about in Tutorial 1. You’Il start by examining how to create styles for 
the list marker. 


Choosing a List Style Type 


The default browser style for unordered and ordered lists is to display each list item 
alongside a symbol known as a list marker. By default, unordered lists are displayed 
with a solid disc while ordered lists are displayed with numerals. To change the type 
of list marker or to prevent any display of a list marker, apply the following 
list-style-type property 


list-style-type: type; 


where type is one of the markers described in Figure 2-31. 


Figure 2-31 Values of the list-style-type property 


list-style-type Marker‘(s) 

disc e 

circle O 

square | 

decimal 1: 2,3) 4 ess 
decimal-leading-zero 01, 02, 03, 04, ... 


lower-roman 


i, ii, ili, iv, ... 


upper -roman 1, UL, WL IV)... 
lower-alpha a,b,c, d,... 
upper-alpha A, B,C, D, ... 
lower-greek a, B, y, 5, ... 
upper-greek A,B,T, A, ... 

none no marker displayed 


> For example, the following style rule marks each item from an ordered list with an 
uppercase Roman numeral: 


List style properties can be 


applied to individual list ol {list-style-type: upper-roman; } 
items using the 1i selector 
in the style rule. 


Creating an Outline Style 


Nested lists can be displayed in an outline style through the use of contextual selectors. 
For example, the following style rules create an outline style for a nested ordered list: 


ol {list-style-type: upper-roman; } 
ol ol {list-style-type: upper-alpha; } 
ol ol ol {list-style-type: decimal; } 


In this style, the o1 selector selects the top level of the list, displaying the list items 
with a Roman numeral. The o1 o1 selector selects the second level, marking the items 
with capital letters. The third level indicated by the 01 01 01 selector is marked with 
decimal values. 

To see how these style rules are rendered on a page, you'll apply them to the three 
pages that Alison has set up describing the running, cycling, and swimming programs 
offered by Tri and Succeed sports. Each page contains a syllabus outlining the course of 
study for the next several weeks. 
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To apply an outline style: 
dD 1. If you took a break after the previous session, make sure the tss_styles.css 
file is open in your editor. 
BD 2. Scroll down to the List Styles section and insert the following style rules to 
format nested ordered lists within the syllabus article: 


article.syllabus ol { 
list-style-type: upper-roman; 


} 


article.syllabus ol ol { 
list-style-type: upper-alpha; 


} 


article.syllabus ol ol ol { 
list-style-type: decimal; 


} 


Figure 2-32 highlights the style rule for the nested lists. 


Figure 2-32 J Creating an outline style for a nested list 


selector for the 
top level of the 
ordered list 


top-level list 
marker is a 
Roman numeral 


irticle.syllabus ol { 
list-style-type: upper -roman;—<— 


selector for the 
second level of 
the ordered list 


-syllabus ol ol { 


: 2°4-level list 
list-style-type: upper-alpha;s<— 


marker is an 
uppercase letter 


selector for the 
third level of the 


. syllabus « 
ordered list “yt 


le- 


ct-cty 
rpLrmaecytertyvee 


3'*-level list 


} marker is a 
decimal number 


BD 3. Save your changes to the file and then open the tss_run.html file in your 
browser. As shown in Figure 2-33, the syllabus for the class should now be 
displayed in an outline style. 
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Figure 2-33 Course outline 


Course Outline 


The running class will meet at the Falk Running Center and, when weather permits, we'll be 
outside at the Falk Running Track. 


I. Week 1 
A. Orientation 
1. Setting a Goal 
2. Group Running 
3. Clothing and Shoes 
4. Danger Zones 
B. Initial Assessment 


1. Gait Assessment 
2. Power Measure nested list with 
3. Time Trial different markers for 
C. Stretching Techniques each level of list items 
Il. Week 2 
A. Wind Sprints 
B. Recovery 


C. Building your Core 
Ill. Week 3 

A. Wind Sprints 2 

B. Stretching Session 

C. Yoga and Running 


Alison points out that the hypertext links from the navigation list are displayed with a 
disc marker. She asks you to remove the markers from the navigation list by setting the 
list-style-type property to none. 


To remove the markers from navigation lists: 
BD 1. Return to the tss_styles.css file in your editor. 


BD 2. Go to the Navigation Styles section and, within the style rule for the nav > ul 
selector, add the style list-style-type: none; 


Figure 2-34 highlights the new style. 


Figure 2-34 2-34 Removing list markers from navigation lists 


nav > ul { 
line-height: 2em; 
List-style-type: none}; 


displays no markers for 
unordered lists within 
the nav element 


BD 3. Save your changes to the file and then open the tss_home.html file in your 
browser. Verify that there are no markers next to the navigation list items in 
the left column. 


BD 4. Go to the other three pages in the website and verify that navigation lists in 
these pages also do not have list markers. 


REFERENCE 
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Designing a List 
¢ To define the appearance of the list marker, use the property 
list-style-type: type; 


where type is disc, circle, square, decimal, decimal-leading-zero, 
lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, 
upper-greek, or none. 

¢ To insert a graphic image as a list marker, use the property 


list-style-image: url(url); 


where url is the URL of the graphic image file. 
¢ To set the position of list markers, use the property 


list-style-position: position; 


where position is inside or outside. 
¢ To define all of the list style properties in a single style, use the property 


list-style: type url(url) position; 


Using Images for List Markers 


You can supply your own graphic image for the list marker with the following 
list-style-image property 


list-style-image: url(url); 


where url is the URL of a graphic file containing the marker image. Marker images are 
only used with unordered lists in which the list marker is the same for every list item. 
For example, the following style rule displays items from unordered lists marked with 
the graphic image in the redball.png file: 

ul {list-style-image: url (redball.png) ;} 


Alison has an icon image in a file named runicon.png that she wants to use for the 
classes listed on the Tri and Succeed Sports home page in the About TSS article. Apply 
her image file to the list now. 


To use an image for a list marker: 
D 1. Return to the tss_styles.css file in your editor. 
D 2. At the top of the List Styles section, insert the following style rule: 


article#about_tss ul { 
list-style-image: url (runicon.png) ; 


} 


Figure 2-35 highlights the style rule to use the runicon.png file as the list 
marker image. 
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an image in place of a list marker 


style rule applied to 
the unordered list 


within the about_tss 
article 


displays the 


- Styles 


k/ 
/ 


runicon.png 
file as the 
list marker 


article#about_tss ul { aa tre & 
_ list-style-image: url(runicon.png);_ 
} 


BD 3. Save your changes to the file and then open the tss_home.html file in your 


browser. As shown in Figure 2-36 the items in the unordered list now use the 


runicon.png image file as their list marker. 


Figure 2-36 Unordered 


list with the runicon.png image marker 


Ba 


runicon.png 
image file 


i) 


o 


Classes 


Winter instruction starts soon. Get a jump on your summer 
goals by joining us for individual or group instruction in: 


Running: We start with the basics to help you run faster 
and farther than you ever thought possible without aches 
and pains. 


i Cycling: The indoor bike trainers at TSS include 


everything you need to refine your technique, stamina, 
and power for Improved results on the road. 


Swimming: The open water swim can be one of the most 
frightening sports to master. Our classes begin with basic 

techniques so that your swim can be very enjoyable, and 

not a chore. 


© Courtesy Patrick Carey 


Notice that the list marker is aligned with the baseline of the first line in each list item. 


This is the default placement for list marker images. 


Setting the List Marker Position 


CSS treats each list item as a block-level element, placed within a virtual box in which 


the list marke 


ris placed outside of the list text. You can change this default behavior 


using the following list-style-position property 


list-style-position: position; 


where posit 


ion is either outside (the default) or inside. Placing the marker 


inside the virtual box causes the list text to flow around the marker. Figure 2-37 
shows how the list-style-position property affects the flow of the text around 
the bullet marker. 


Tutorial 2 Getting Started with CSS | HTML 5 and CSS 


HTML 143 


Figure 2-37 Values of the list-style-position property 


virtual box around 
each list item 


+ Running = Running: We start with tf 
j Earth und fart rh 
+ Cycling: The train t TSs j » Cycling: T 
+* Swimming: The » Swimming: The 
Ttrigitening sports to master or cla 3in with ba f t frightenin orts t vaste hur clacse 


hniq that y wim can be very ¢ ya and basic techniques that y ‘ mM) be very enjoyable 


list-style-position: outside; list-style-position: inside; 
All three of the list styles just discussed can be combined within the following 
shorthand list-style property 


list-style: type image position; 


where type is the marker type, image is an image to be displayed in place of the 
marker, and position is the location of the marker. For example, the following style 
rule displays unordered lists using the marker found in the bullet.png image placed 
inside the containing block: 


ul {list-style: circle url(bullet.png) inside; } 


If a browser is unable to display the bullet.png image, it uses a default circle marker 
instead. You do not need to include all three style properties with the list style. Browsers 
will set any property you omit to the default value. 

Allison notes that there is a lot of unused space to the left of the items in the 
navigation list now that the list markers have been removed. She wants you to move 
the navigation list into that empty space. To do this, you'll work with the CSS styles for 
margin and padding space. 


Working with Margins and Padding 


Block-level elements like paragraphs or headings or lists follow the structure of the box 
model in which the content is enclosed within the following series of nested boxes: 


¢ the content of the element itself 

e the padding space, which extends from the element's content to the element’s border 

e the border surrounding the padding space and marking the extent of the element 

e the margin space comprised of the space between the element and the next page 
element 


Figure 2-38 shows a diagram of the box model for a sample paragraph discussing 
athletes at Tri and Succeed Sports. 
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Your browser's developer 
tools will display a schematic 
diagram of the box model 
for each element on your 
page so that you can 
determine the size of the 
padding, border, and 


margin spaces. 


iAthletes are 2 the foundation of every successful training 

ipr ogram. The best coach is an experienced guide who begins 
iwith each athlete's hopes, dreams and desires and then tailors 
‘a training plan based on that individuals's current fitness and 
ilifestyle. Since 2002, TSS has helped hundreds of individuals 


lachieve success in many fitness areas. The winner is not the 
1one who finishes first but anyone who starts the race and 
'perseveres. Join us and begin exploring the possible. 


The browser's internal style sheet sets the size of the padding, border, and margin 
spaces but you can specify different sizes in your style sheet. 


Setting the Padding Space 
To set the width of the padding space, use the following padding property 
padding: size; 


where size is expressed in one of the CSS units of length or the keyword auto to let 
the browser automatically choose the padding. For example, the following style rule 
sets the padding space around every paragraph to 20 pixels: 


p {padding: 20px; } 


The padding space can also be defined for each of the four sides of the virtual box 
by writing the padding property as follows 


padding: top right bottom left; 


where top is the size of the padding space along the top edge of the content, right 
is padding along the right edge, bot tom is the size of the bottom padding, and left 
is the size of the padding along the left edge. Thus, the following style rule creates a 
padding space that is 10 pixels on top, 0 pixels to the right, 15 pixels on the bottom, 
and 5 pixels to the left: 


p {padding: 10px Opx 15px 5px; } 


To help remember this order, think of moving clockwise around the box, starting 
with the top edge. While you don’t have to supply values for all of the edges, the values 
you supply are interpreted based on how many values you supply. So, if you specify a 
single value, it’s applied to all four sides equally. Two values set the padding spaces for 
the top/bottom edges and the right/left edges. For example, the following style rule sets 
the top and bottom padding spaces at 10 pixels and the right and left padding spaces at 
5 pixels: 


p {padding: 10px 5px; } 


With three values, the padding spaces are set for the top, right/left, and bottom 
edges. Thus, the following rule sets the size of the top padding space to 10 pixels, the 
left/right spaces to 5 pixels, and the bottom space to 0 pixels: 


p {padding: 10px 5px Opx; } 
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To define the padding space for one edge but not for the others, apply the following 
style properties: 


padding-top: size; 
padding-right: size; 
padding-bottom: size; 
padding-left: size; 


The following style rule sets the top padding of every paragraph to 10 pixels but it 
does not specify a padding size for any of the three remaining edges: 


p {padding-top: 10px; } 


With ordered and unordered lists, the default browser style sets the left padding space 
to 40 pixels in order to provide the extra space needed for the list markers. Removing the 
list markers doesn’t remove this padding space. Allison suggests you recover this unused 
space by reducing the size of the left padding space in the navigation list to 5 pixels. 


To change the left padding used in the navigation list: 


BD 1. Return to the tss_styles.css file in your editor. 


eget D2. Locate dhe te ley lain dhe Nevieio Silos eecon sil add tie 
Figure 2-39 highlights the new style for all navigation lists. 


Setting the size of the left padding space 


selects unordered av > ul { 

lists within the nav line-height: 2em; 
element lList-style-type: none3{ sets the padding 
padding-left: 5px; on the left edge 
to 5 pixels 


~ 


D 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Verify that the entries in the navigation list in the left column have 
been shifted to the left, which is the result of changing the left padding 
setting to 5 pixels. 


Now that you’ve worked with the padding space, you'll examine how to work with 
margins. 
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Setting Padding and Margin Space 
¢ To set the padding space around all sides of the element, use 
padding: size; 


where size is the size of the padding using one of the CSS units of length. 
¢ To set the margin space around all sides of the element, use 


REFERENCE 


margin: size; 


¢ To set padding or margin on only one side (top, right, bottom, or left) include the 
name of the side in the property as 


padding-side: size; 
margin-side: size; 


where side is top, right, bottom, or left 
To set different padding or margins on each side of the element, enter the sides as 


padding: top right bottom left; 
margin: top right bottom left; 


where top, right, bottom, and left are individual sizes for the associated side. 


Setting the Margin and the Border Spaces 


Styles to set the margin space are similar to the padding styles. To set the size of the 
margin around your block elements, use either of the following properties: 


margin: size; 
or 
margin: top right bottom left; 
The margins of individual sides are set using the style properties 


margin-top: size; 
margin-right: size; 
margin-bottom: size; 
margin-left: size; 


where once again size is expressed in one of the CSS units of length or using the 
keyword auto to have the browser automatically set the margin. 
The size of the border space is set using the following border-width property 


border-width: size; 
or 
border-width: top right bottom left; 


or with the properties border-top-width, border-right -width, 
border-bottom-width, and border-left-width used to specify the size of individual 
borders. You'll explore borders in more detail in Tutorial 4. 

The navigation list that Alison created for the home page groups the list into those 
links for pages within the Tri and Succeed Sports website and those links to external 
websites. The list item at the start of each group is marked with the class value 
newgroup. Alison suggests you increase the top margin above each group of links to 
20 pixels in order to offset it from the preceding group. The groups will be easier to 
recognize after the top margin for each group has been increased. 
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To increase the top margin: 
BD 1. Return to the tss_styles.css file in your editor. 


BD 2. Directly below the style rule for the nav > ul selector in the Navigation 
Styles section, add the following rule: 


nav > ul > li.newgroup { 
margin-top: 20px; 


} 


Figure 2-40 highlights the style rule setting the top margin value. 


Figure 2-40 Setting the size of the top margin 


selects the list items 
belonging to the 


newgroup class found vy > ul > Li.newgroup { se omen 
within the unordered margin-top: 20px; space on the top 
navigation list } 


edge to 20 pixels 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Verify that the entries in the navigation list are now split into three 
groups: the first group containing the links from the Tri and Succeed Sports 
website; the second group containing links to websites on running, cycling, 
and swimming; and the third group containing links to triathlon websites. 


Alison has also noticed that the block quotes in the right column of the home page 
have unused space to the left, leaving less space for the customer quotes. The default 
browser style for the blockquote element offsets block quotes from the surrounding 
text by setting the left and right margins to 40 pixels. To adjust this spacing and to make 
the block quotes more readable, you'll reduce the left/right margins to 5 pixels. You'll 
also increase the top/bottom margins to 20 pixels to better separate one customer quote 
from another. 


To change the margin space around block quotes: 
D 1. Return to the tss_styles.css file in your editor. 


D 2. Locate the style rule for the aside blockquote selector in the Aside and 
Blockquote Styles section and insert the margin: 20px 5px; style into the 
style rule for the aside blockquote selector. 


Figure 2-41 displays the style to change the margin space around the 
blockquote element. 
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Figure 2-41 Setting the margin size for block quotes 


selects block quotes 
within the aside 
element 


aside blockquote { 
color: rgb(232, 165, 116); 
margin: 20px Spx}; 


sets the size of the 
top and bottom 
margins to 20 pixels 


sets the size of the 
left and right margins 


BD 3. Save your changes to the file and then reload the tss_home.html file in your 
browser. Figure 2-42 displays the revised appearance of the page with the 
new padding and margin sizes applied to the navigation list and the block 


quotes. 


Home page with new margins and padding 
a 


| each block quote 
surrounded by a 


20 pixel top/bottom 
margin and a 5 pixel 
left/right margin 


Sports |) 
a ‘ 
left padding set to 
5 pixels 


each new group 
offset by a 20 pixel 
top margin 


la 
4 Running W 


kee Comments 
Links About TSS Comments 
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Alison thinks the revised appearance of the navigation list and the customer quotes 
is a big improvement. However, she doesn’t like the underlining in the navigation 
list. She would like the underlining to appear only when the user hovers the mouse 
pointer over the link. She would also like a different list marker to appear next to each 
list item in the classes section. You can make these changes using pseudo-classes and 


pseudo-elements. 
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Using Pseudo-Classes and Pseudo-Elements 


Not everything that appears in the rendered page is marked up in the HTML file. For 
example, a paragraph has a first letter or a first line but those are not marked as distinct 
elements. Similarly, an element can be classified based on a particular property without 
having a class attribute. The initial entry from an ordered list has the property of 

being the first item, but no class attribute in the HTML file identifies it as such. These 
elements and class attributes that exist only within the rendered page but not within 
the HTML document are known as pseudo-elements and pseudo-classes. Despite not 
being part of the HTML document, you can still write style rules for them. 


Pseudo-Classes 


A pseudo-class is a classification of an element based on its current status, position, or 
use in the document. The style rule for a pseudo-class uses the selector 


element:pseudo-class 


where element is an element from the document and pseudo-class is the name of a 
CSS pseudo-class. Pseudo-classes are organized into structural and dynamic classes. A 
structural pseudo-class classifies an element based on its location within the structure of 
the HTML document. Figure 2—43 lists the structural pseudo-classes supported in CSS. 


Figure 2-43 Structural pseudo-classes 


Pseudo-Class Matches 

: root The top element in the document hierarchy (the html element) 
empty An element with no content 

:only-child An element with no siblings 

:first-child The first child of the parent element 

:last-child The last child of the parent element 

:first-of-type The first descendant of the parent that matches the specified type 
:last-of-type The last descendant of the parent that matches the specified type 
:nth-of-type (n) The n® element of the parent of the specified type 
:nth-last-of-type (n) The n* from the last element of the parent of the specified type 
:only-of-type An element that has no siblings of the same type 

: lang (code) The element that has the specified language indicated by code 
:not (selector) An element not matching the specified selector 


For example, the first-of-type pseudo-class identifies the first element of a 
particular type. The following selector uses this £irst-of-type pseudo-class to select 
the first list item found within an unordered list: 


ul > li:first-of-type 


This selector will not select any other list item and it will not select the first list item if it 
is not part of an unordered list. 

Alison would like to modify the marker images used with the list of classes on the 
home page. Currently the runicon.png image file is used as the marker for all three list 
items. Instead, she would like to use the runicon.png image only for the first item, the 
bikeicon.png image as the marker for the second list item, and the swimicon.png as the 
third and last item’s maker. You can use the first-of-type, nth-of-type, and 
last-of-type pseudo-classes to match the appropriate png file with each item. 
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To apply pseudo-classes to an unordered list: 
BD 1. Return to the tss_styles.css file in your editor. 


D 2. Go to the List Styles section at the bottom of the style sheet, delete the 
article#about_tss ul style rule that sets the list style image marker and 
replace it with the following three style rules: 


article#about tss ul li:first-of-type { 
list-style-image: url (runicon.png) ; 


} 


article#about tss ul li:nth-of-type(2) { 
list-style-image: url (bikeicon.png) ; 


} 


article#about tss ul li:last-of-type { 
list-style-image: url (swimicon.png) ; 


} 


Figure 2-44 highlights the three selectors and their associated style rules 
using pseudo-classes with the unordered list items. 


Figure 2-44} 2-44 Applying pseudo-classes to list items 


( selects the first ) 
list item from 
, le#about_tss ul li:first-of-type {<— ihe unordered 
uses the runicon.png (Hares paea. Seana SP ectnren chiase list in the 
as the marker for the List-style-image: url(runicon. png) 5 about_tss 
Ls: list item } article 
" le#about_tss ul Liinth-of-type(2) {1 selects the 
uses the bikeicon.png list-style-image: url(bikeicon.png); second list item 
image for the second } 
marker 
, — le#about_tss ul Li:last-of-type {<—; oe unelees 
uses the swimicon.png list-style-image: url(swimicon.png); ist item 
image for the last } A 
marker 
. ee | 


BD 3. Save your changes to the file and then reload the tss_home.html file in 
your browser. Figure 2-45 shows the new format of the unordered list with 
different image markers used with each of the list items. 
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Figure 2-45 List marker images for each item 


Winter instruction starts soon. Get a jump on your summer 
goals by joining us for individual or group instruction in; 


runicon.png 
. — 
image 


es 
i) 3 Running: We start with the basics to help you run faster 


and farther than you ever thought possible without aches 
and pains. 


aS) 
seer +» 'e Cycling: The indoor bike trainers at TSS include 


———— everything you need to refine your technique, stamina, 


= and power for improved results on the road. 
swimicon.png a> , 

image w Swimming; The open water swim can be one of the most 
aE frightening sports to master. Our classes begin with basic 
techniques so that your swim can be very enjoyable, and 


not a chore. 
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Exploring the nth-of-type Pseudo-class 


The nth-of-type pseudo-class is a powerful tool for formatting groups of elements in 
cyclical order. Cycles are created using the selector 


nth-of-type (an+b) 


INSIGHT 


where a is the length of the cycle, b is an offset from the start of the cycle, and n is 

a counter, which starts at 0 and increases by 1 through each iteration of the cycle. 

For example, the following style rules create a cycle of length 3 with the first list item 
displayed in red, the second displayed in blue, and the third displayed in green, after 
which the cycle repeats red-blue-green until the last item is reached: 


li:nth-of-type(3n+1) {color: red; } 
li:nth-of-type(3n+2) {color: blue; } 
li:nth-of-type(3n+3) {color: green; } 


When the cycle length is 1, the nth-of-type selector selects elements after the 
specified offset has passed. The following style rule sets the text color to blue for all 
list items starting from the 5" item 


li:nth-of-type(n+5) {color: blue; } 


CSS also supports the keywords even and odd so that two-length cycles can be more 
compactly entered as 


li:nth-of-type(even) {color: red; } 
li:nth-of-type(odd) {color: blue; } 


with a red font applied to the even-numbered list items and a blue font applied to the 
odd-numbered items. 

The same cyclical methods described above can be applied to the nth-child selector 
with the important difference that the nth-child selector selects any child element of 
the parent while the nth-of -type selector only selects elements of a specified type. 
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Pseudo-classes for Hypertext 


Another type of pseudo-class is a dynamic pseudo-class in which the class can change 
state based on the actions of the user. Dynamic pseudo-classes are used with hypertext 
links such as the visited class, which indicates whether the target of the link has 
already been visited by the user. Figure 2-46 describes the dynamic pseudo-classes. 


Figure 2-46 Dynamic pseudo-classes 


Pseudo-Class Description 

: link The link has not yet been visited by the user. 

:visited The link has been visited by the user. 

:active The element is in the process of being activated or clicked by the user. 
:hover The mouse pointer is hovering over the element. 

:focus The element is receiving the focus of the keyboard or mouse pointer. 


For example, to display all previously visited links in a red font, you could apply the 
following style rule to the a element: 


a:visited {color: red; } 


To change the text color to blue when the mouse pointer is hovered over the link, 
apply the following rule: 


a:hover {color: blue; } 
——— : | In some cases, two or more pseudo-classes can apply to the same element. 
For example, a hypertext link can be both visited previously and hovered over. In 


The hover, active, and . i é é * 
Bee reipecide neces such situations, the standard cascading rules apply with the pseudo-class listed last 


also can be applied to applied to the element. As a result, you should enter the hypertext pseudo-classes 
non-hypertext elements in the following order—link, visited, hover, and active. The link pseudo-class 
to create dynamic page comes first because it represents a hypertext link that has not been visited yet. The 


elements that change their 
appearance in response to 
user actions. 


visited pseudo-class comes next, for links that have been previously visited. The 
hover pseudo-class follows, for the situation in which a user has moved the mouse 
pointer over a hypertext link prior to clicking the link. The active pseudo-class is last, 
representing the exact instant in which a link is activated. 

Users with disabilities might interact with hypertext links through their keyboard 
rather than through a mouse pointer. Most browsers allow users to press the Tab key to 
navigate through the list of hypertext links on the page and to activate those links by 
pressing the Enter key. A link reached through the keyboard has the focus of the page 
and most browsers will indicate this focus by displaying an outline around the linked 
text. You can substitute your own style by using the £ocus pseudo-class in the same 
way that you used the hover pseudo-class. 


Using Dynamic Pseudo-Class to Create Hypertext 


Lud ; 

UW ° Tocreate a rollover for a hypertext link, use the pseudo-classes 
< a:link 

a a:visited 

bo a:hover 

_ a:active 


where the link pseudo-element matches unvisited link, visited matches 
previously visited links, hover matches links that have the mouse pointer hovering 
over them, and active matches links that are in the action of being clicked. 
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The default browser style is to underline all hypertext links; displaying the links in a 
blue font with previously visited links in purple. Alison wants the links in the navigation 
list to appear in a medium gray font with no distinction between unvisited and 
previously visited links. She does not want the hypertext underlined in the navigation 
list except when the link is hovered over or active. She also wants hovered or active 
links to appear in purple. Add these style rules to the style sheet now. 


To apply pseudo-classes to a hypertext links: 
BD 1. Return to the tss_styles.css file in your editor. 


BD 2. Go to the Navigation Styles section and add the following style rules for 
hypertext links that have been visited or not visited. 


nav > ul > 1i > a:link, nav > ul > 1i > a:visited { 
lolepsg safepey((alinal, alisal,, abeyal)) p 
text-decoration: none; 


} 


BD 3. Add the following new style rules for links that are being hovered over or are 
active: 


nav > ul > 1i > a:hover, nav > ul > li > a:active { 
Geulojeg igen (Aas, Otis, ASS))p 
text-decoration: underline; 


} 


Figure 2-47 highlights the style rules for hypertext links in the navigation list. 


Figure 2-47 Using pseudo-classes with hypertext links 


nav > ul > Lli.newgroup { 


S ene Hore lai eas sets the text color to 
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4 color: rgb(151,; 151; 151); 


selects links that the user is text-decoration: none} removes underlining 
hovering over (a:hover) or } from the hypertext link 


that are currently being 
activated (a:active) jy nav > ul > li > athover, nav > ul > li } atactive f 


color: rgb(255, 64, 255); sets the text color to 
text-decoration: underline; medium purple 


adds underlining to the 


hypertext link } 
ypertext lin 


4 


D 4. Save your changes to the file and then reload the tss_home.html file in your 
browser and hover your mouse pointer over the links in the navigation list. 
Figure 2-48 shows the hover effect applied to the link to the TSS swimming 
class. 
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Style applied to a hovered link 


link color changed to 
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Problem Solving: Hover with Touch Devices 


The hover pseudo-class was written to apply only to user interfaces that support mice 
or similar pointing devices. Technically, there is no hover event with touch devices, such 
as mobile phones and tablets. However, most mobile devices will still respond to a 
hover style by briefly applying the style when the user initially touches a hypertext link. 

Many mobile devices also apply a “double tap” response so that initially touching 
a page element invokes the hover style and then immediately tapping the page 
element a second time invokes the click event. This technique is most often used for 
web pages that use the hover event to reveal hidden menus and page objects. 

With the increasing importance of touch devices, a good guiding principle is that 
you should avoid making support for the hover style necessary for the end-user. Hover 
effects should be limited to enhancing the user experience but they should not be a 
critical component of that experience. 


Pseudo-Elements 


Another type of pseudo selector is a pseudo-element, which is an object that exists 

only in the rendered page. For example, a paragraph is an element that is marked in 

the HTML file, but the first line of that paragraph is not. Similarly, the first letter of that 
paragraph is also not a document element, but it certainly can be identified as an object 
in the web page. Pseudo-elements can be selected using the following CSS selector 


element: :pseudo-element 


where element is an element from the HTML file and pseudo-element is the name of 
a CSS pseudo-element. Figure 2-49 describes the pseudo-elements supported in CSS. 


Figure 2-49 J 2-49 Pseudo-elements 


Pseudo-Element Description 

::first-letter The first letter of the element text 

:: first-line The first line of the element text 

: :before Content inserted directly before the element 


::after Content inserted directly after the element 
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For example, the following style rule matches the first displayed line of every 
paragraph in the rendered web page and transforms the text of that line to uppercase 
letters: 


p::first-line {text-transform: uppercase; } 


The following style rule matches the first letter of every paragraph within a block 
quote and displays the character in a Times New Roman font that is 250% larger than 
the surrounding text: 


blockquote p::first-letter { 
font-family: ‘Times New Roman’, Times, serif; 
font-size: 250%; 


} 


The double colon separator “: :” was introduced in CSS to differentiate pseudo- 
elements from pseudo-classes. Older browsers use the singe colon “:” for both pseudo- 
elements and pseudo-classes. 


Generating Content with CSS 


Another type of pseudo-element is used to generate content for the web page. New 
content can be added either before or after an element using the following before and 
after pseudo-elements 


element: :before {content: text; } 
element::after {content: text;} 


where text is the content to be inserted into the rendered web page. The content 
property supports several types of text content as described in Figure 2-50. 


Figure 2-50 Values of the content property 


Value Description 

none Sets the content to an empty text string 

counter Displays a counter value 

attr (attribute) Displays the value of the selector's attribute 

text Displays the specified text 

open-quote Displays an opening quotation mark 

close-quote Displays a closing quotation mark 

no-open-quote Removes an opening quotation mark, if previously specified 
no-close-quote Removes a closing quotation mark, if previously specified 

url (url) Displays the content of the media (image, video, etc.) from the file 


located at url 


For example, the following style rules combine the before and after pseudo- 
elements with the hover pseudo-class to insert the “<” and “>” characters around 
every hypertext link in a navigation list: 


nav a:hover::before {content: "<";} 
You cannot use CSS to nav a:hover::after {content: ">";} 


insert HTML markup tags, 


chatackerererenceesr Note that these style rules use both the hover pseudo-class and the before/after 


entity references. Those pseudo-elements so that the content is only inserted in response to the hover event. 
can only be done within If you want to insert a special symbol, you have to insert the code number for 
the HTML file. 


that symbol using text string" \ code" where code is the code number. For example, 
if instead of single angled brackets as indicated above, you wanted to show double 


HTML 156 


HTML 5 and 
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angled brackets, « and », you would need to use the Unicode character code for these 
characters, 00ab and 00bb respectively. To insert these characters before and after a 
navigation list hypertext link, you would apply the following style rules: 


nav a:hover::before {content: "\00ab"; } 
nav a:hover::after {content: "\00bb"; } 


In addition to adding content to an element as just discussed, you can also insert 
content that is a media file, such as an image or video clip, by using the following 
content property 


content: url(url); 


where url is the location of the media file. For example, the following style rule 
appends the image file uparrow.png to any hypertext link in the document when it is 
hovered over: 


a:hover::after {content: url (uparrow.png) ; } 


An image file or any content generated by the style sheet should not consist of 
material that is crucial to understanding your page. Instead, generated content should 
only consist of material that supplements the page for artistic or design-related reasons. 
If the generated content is crucial to understanding the page, it should be placed in the 
HTML file in the first place. 


Displaying Attribute Values 


The content property can also be used to insert an attribute value into the rendered 
web page through the use of the following attxr() function 


content: attr(attribute) ; 


where attribute is an attribute of the selected element. One application of the 

attr () function is to add the URL of any hypertext link to the link text. In the following 
code, the value of the href attribute is appended to every occurrence of text marked 
with the a element: 


a::after { 
content: "( " attr(href) ")"; 


} 


Notice that URL is enclosed within opening and closing parentheses. Thus, a hypertext 
link in an HTML document, such as 


<a href="http://www.triathlon.org">Triathlons</a> 


will be displayed in the rendered web page as: 

Triathlons (http://www.triathlon.org) 
This technique is particularly useful for printed output in which the author wants to have 
the URLs of all links displayed on the printed page for users to read and have as references. 


REFERENCE 


Inserting Content using CSS 
¢ To insert content directly before a page element, use the style rule 
element: :before {content: text; } 


where element is the page element and text is the content to be inserted before the 
element. 
¢ To insert content directly after a page element, use the style rule 


element::after {content: text; } 
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Inserting Quotation Marks 


The blockquote and g elements are used for quoted material. The content of these 
elements is usually placed in quotation marks and, while you can insert these quotation 
marks within the HTML file, you can also insert decorative opening and closing 
quotation marks using the content property with the following values: 


content: open-quote; 
content: close-quote; 


The actual characters used for the open and closing quotation marks are defined for 
the selector with the following quotes property 


quotes: "openi" "closei" "open2" "close2" ...; 


where open1 is the character used for the opening quotation mark and closei is 
character used for the closing quotation mark. The text strings open2, close2, and so 
on are used for nested quotation marks. In the example that follows, character codes 
are used to define the curly quotes for opening and closing quotation marks 


quotes: "\201C" "\201D" "\2018" "\2019"; 


TIP a the character code 201C returns the opening curly double quote “, the code 

tenermnaci 201D returns the closing curly double quote ”, the code 2018 returns the nested 
Gunertediby/CSs opening single quote ’, and 2019 provides the closing single quote ’. 
ave Gian weadl with Alison suggests that you use decorative quotes for the customer comments on the Tri 
international pages in and Succeed Sports home page. You display curly quotes in a bold Times New Roman 


which different languages font with a font size of 1.6em (which is slightly bigger than the font size of the block 


require different quotation quote text.) 
mark symbols. 


To insert quotes into block quotes: 
BD 1. Return to the tss_styles.css file in your editor. 


D 2. Go to the Aside and Blockquote Styles section and, within the style rule for 
the aside blockquote selector, add the following quotes property to use 
curly quotes for the quotation marks: 


quotes: "\201C" "\201D"; 


BD 3. Add the following style rules to insert quotation marks before and after each 
block quote in the aside element: 


aside blockquote::before { 
content: open-quote; 
font-family: ‘Times New Roman’, Times, serif; 
font-size: 1.6em; 
font-weight: bold; 


} 


aside blockquote::after { 
content: close-quote; 
font-family: ‘Times New Roman’, Times, serif; 
font-size: 1.6em; 
font-weight: bold; 


} 


Figure 2-51 highlights the styles to add curly quotes before and after each 
block quote. 
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Figure 2-51 Adding quotation marks to block quotes 


character codes for the 


aside blockquote { 
"and ” curly quotes 


color: rgb(232, 165, 116); 


margin: 20px 5px3 oan 
3 ec* "\9QI1C" "\7e1pD" isplays the open 
} quatess "NAGE? NA2GIN"S quote character before 
(before pseudo-element J, each block quote 


aside blockquote: :before { | 
content: open-quote} 


font-family: 'Times New Roman', Times, serif; 
font-size: 1.6em; 
font-weight: bold; displays the close 
quote character after 
each block quote 


aside blockquote: :after { | 
content: close-quote; 
font-family: 'Times New Roman', Times, serif; 
font-size: 1.6em; 
font-weight: bold; 


format applied to the 
opening and closing 
quotation marks 


after pseudo-element 


BD 4. Save your changes to the file and then reload the tss_home.html file in your 
browser. As shown in Figure 2-52, bold quotation marks have been added 
before and after each customer comment. 


Figure 2-52 Quotation marks added to reviewer comments 


opening and closing 
quotes enclose each 
comment 


Comments 


Since 2002, Tri and Succeed 
Sports has provided Austin with a 
first class training center for athletes 
of all abilities and goals. We 
specialize in helping you reach your 
full potential. You tell us what you 
want to do; we work to fulfill your 
needs. 


Want to swim? Great! Interested in 
improving your cycling? Fantastic! 


© Monkey Business Images/Shutterstock.com 


Validating Your Style Sheet 


As with your HTML code, you can submit your CSS style sheet for validation, either to 
a web content management system or to the validation site at the W3C. You decide to 
test your CSS code for possible errors by using a validator. First add a deliberate error 
to the code so you can see how the CSS validator works. 
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To introduce an error to the tss_styles.css file: 


1. Scroll up and change the background color value for the html element 
from hsl(27, 72%, 72%) to hsl(27, 72, 72) (deleting the % symbols from the 
saturation and lightness values). 


2. Save your changes to the file. 


Using the validator at the W3C website or one built into your editor, validate the 
tss_styles.css file to see the impact of this change. 


To validate the code in the tss_styles.css file: 
BD 1. Open your browser to the W3C validator at https://jigsaw.w3.org/css-validator/. 
2. Click the Validate by File Upload or By file upload tab within the web page. 


D 3. Click the Choose File or Browse button in the web form and locate the 
tss_styles.css file from the html02 » tutorial folder. Select the file and click 
Open to load the file into the validator. 


D4. Click the Check button to validate the file. See Figure 2-53. 


ee SS validation report 
The W3C CSS Validation Service 


Jumpto: Errors(|) Validated CSS 


W3C CSS Validator results for tss_styles.css (CSS level 3 + SVG) 


error due to using a value 
Sorry! We found the following errors (1) of 72 in the HSL color value 


URI: tss_styles.css rather than 72% 
25 tet Value Error background-color 72 is nota valid color 3 or § hexadecimais numbers 


Saturation and lightness in the HSL color value must be entered as percentages, such as 
72%, rather than numbers, such as 72. The validator caught this mistake and reported it as 
an error. Note that unlike HTML errors, browsers are very unforgiving about CSS errors. If 
you make a mistake in your CSS files, the browser will ignore the style rule with the syntax 
error and resort to its own browser style sheet if necessary to render the page object. 


To fix the error in the tss_styles.css file: 
BD 1. Return to the tss_styles.css file in your editor. 


BD 2. Change the background color value for the html element back to hsl(27, 
72%, 72%). 


BD 3. Save your changes to the file. 


D4. Return in your browser to the W3C validator at https://jigsaw.w3.org/css- 
validator/ or run the validator with your HTML editor. 


D 5. Retest the tss_styles.css file, verifying that no errors or warnings are reported. 
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Teamwork: Managing a Style Sheet 


Your style sheets often will be as long and as complex as your website content. As the 
size of a style sheet increases, you might find yourself overwhelmed by multiple style 
rules and definitions. This can be an especially critical problem in a workplace where 
several people need to interpret and sometimes edit the same style sheet. Good 
management skills are as crucial to good design as a well-chosen color or typeface 
are. As you create your own style sheets, here are some techniques to help you 
manage your creations: 


PROSKILLS 1 


¢ Use style comments throughout, especially at the top of the file. Clearly describe the 
purpose of the style sheet, where it's used, who created it, and when it was created. 

e Because color values are not always immediately obvious, include comments that 
describe your colors. For example, annotate a color value with a comment such as 
“body text is tan”. 

e Divide your style sheet into sections, with comments marking the section headings. 

e Choose an organizing scheme and stick with it. You may want to organize style 
rules by the order in which they appear in your documents, or you may want to 
insert them alphabetically. Whichever you choose, be consistent and document the 
organizing scheme in your style comments. 

¢ Keep your style sheets as small as possible, and break them into separate files if 
necessary. Use one style sheet for layout, another for text design, and perhaps 
another for color and graphics. Combine the style sheets using the @import rule, 
or combine them using the Link element within each page. Also, consider creating 
one style sheet for basic pages on your website, and another for pages that deal 
with special content. For example, an online store could use one style sheet (or set 
of sheets) for product information and another for customer information. 


By following some of these basic techniques, you'll find your style sheets easier to 
manage and develop, and it will be easier for your colleagues to collaborate with you 
to create an eye-catching website. 


Alison is pleased with the work you've done on the typography and design of the 
Tri and Succeed Sports website. Alison will continue to develop the new version of the 
website and will get back to you with future changes and design ideas. 


Session 2.3 Quick Check 


1. Which style will display a list with lowercase letters as the list marker? 
a. list-style-type: lower-letter; 
b. list-style-case: lower; 


REVIEW 


c. list-style; lower-case; 
d. list-style-type: lower-alpha; 
2. Which style rule will display all unordered lists using the star.png image file 
placed inside the virtual box? 
a. ul { list-style-image: star.png; 
list-position: inside; 
} 
b. ul { list-style-image: url(star.png) ; 
list-style-position: inside; 


| 
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c. ul { list-image: url(star.png) ; 
list-position: inside; 
} 


d. ul { list-style-listImage: star.png; 
inside: true; 
} 


3. Which style displays all previously visited hypertext links in gray? 
a. a:visited { 
color: gray; 
} 
b. a:previousVisit { 
color: gray; 


d. a#visited { 
color: gray; 


} 


4. What is the size of the left padding space in the style property padding-spacing: 
10px 5px 8px; ? 
a. 10px 
b. 5px 
c. 8px 
d. The size is not specified 
5. Which of the following styles sets the size of the left margin to 30 pixels? 
a. margin: 30px; 
b. margin: 10px 30px; 
c. margin: 10px 30px 5px; 
d. All of the above 
6. The first line of a paragraph is referenced using which selector? 
a. p#first-line; 
b. p.first-line; 
c. p > first-line; 
d. p::first-line; 
7. The space at the outer extent of an element is found within the element's 
a. content 
b. padding 
c. border 
d. margin 


8. Which style rule will insert the text string “***” before every paragraph belonging 
to the Reviews class? 
a. p#Reviews {content: “***";} 
b. p#Reviews {before: “***";} 
C. p.Reviews.before {content: “***";} 
d. p.Reviews::before {content: “***";} 

9. Which style rule will underline the last item in an ordered list? 
a. ol li:last {text-decoration: underline; } 
b. ol li:last-of-type {text-decoration: underline; } 
Cc. ol li#last {text-decoration: underline; } 
d. ol li.last-of-type {text-decoration: underline; } 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code2-1_txt.html, code2-1_txt.css 


Use CSS to format the appearance of a web page containing several literary quotes marked as 
blockquote elements. Figure 2-54 shows a preview of the formatted page. 


Coding Challenge 2-1 example page 
Literary Excerpts 


A Selection of Great Prose 


CODE 


We are the music-makers, And we are the dreamers of dreams, W andering by lone sea-breakers 
And sitting by desolate streams. World-losers and world-forsakers, Upon whom the pale moon 
gleams; Yet we are the movers and shakers, Of the world forever, it seems 

irthur O'Shauelmessy, Poems of Arthur O Shauelmessy 
I took a deep breath and listened to the old brag of my heart. | am, I am, | am 


Svivia Plath, The Bell Jar 


I he most beautiful things in the world cannot be seen or touched, they are felt with the heart 


intoine de Saint-Exupérv, The Little Prince 


Stuff your eyes with wonder, he said, live as if you'd drop dead in ten seconds, See the world. It's 


more fantastic than any dream made or paid for m factorie: 
Ray Bradbury. Falirrenheit 451 


Do the following: 


1. Open the code2-1_txt.html and code2-1_txt.css files from the html02 » /code1 folder. Enter 
your name and the date in each document and save the files as code2-1.html and code2-1.css 
respectively. 


2. Go to the code2-1.html file in your editor. Within the head section insert a link element linking 
the page to the code2-1.css file. Review the contents of the file and then save your changes. 

3. Go to the code2-1.css file in your editor. 

4. Create a style rule for the h1 element that sets the font-size property to 3.5em and sets the line- 
height property to Oem. 

5. Create a style rule for h1 and h2 elements that applies the fonts Helvetica, Arial, sans-serif to the 
font-family property and sets the letter-spacing property to 0.1em. 


6. Create a style rule for the blockquote element that sets the color property to the value hsl(30, 
85%, 45%) and sets the font-size property to 1.5em. 


7. Create a style for the first letter of the blockquote element that sets the font-size property to 
1.5em. 


8. Create a style for the footer element that: 

a) Centers the text by setting the text-align property to center, 

b) Sets the font-size property to 2em, 

c) Sets the color property to white, and 

d) Sets the background-color property to the color value hsl(30, 85%, 45%). 
9. Save your changes to the file. 


10. Test the code2-1.html file in your browser, verifying that the page resembles that shown in 
Figure 2-54 (aside from the line length which depends on the width of your browser window.) 
11. Submit the completed file to your instructor. 
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Coding Challenge 2 


CODE 


Figure 2-55 shows part of a web page for a website on sports. Use CSS to complete the style rules 
for the document. 


HTML 163 


Data Files needed for this Coding Challenge: code2-2_txt.html, code2-2_txt.css, code2-2_layout.css 


Sports Talk 


Top Ten Sports Websites 


Jenkins on Ice 


Retued NBA staz Dennis Jenkins announced today that he has ngned a 
contract with Long Sleep to have his body frozen before death, to be revived 
only when medical scsence has discovered 2 cure to the aging process 


Lows of guys get frozen for cancer and steff, " explains the alwaye- 
entertaining Jenkins, I just want to setum once they can give me back my 
eternal youth’ [sic] Perhaps Jenkins is also hoping medical science can cure 
hus free-throw shooting - 37% and falling during his last year in the league 


A reader tells us that Jenkins may not be aware that part of the Long Sleep 
process 1s to remove the head. keeping only the brain to be revived. This 
would be a problem for Jenkins sunce he would be left with his least-valuable 
asset 


Do the following: 


1 


. Open the code2-2_txt.html and code2-2_txt.css files from the html02 » /code2 folder. Enter 


your name and the date in each document and save the files as code2-2.html and code2-2.css 
respectively. 


. Go to the code2-2.html file in your editor. Within the head section insert link elements linking 


the page to the code2-2_layout.css and code2-2.css files. Review the contents of the file and 
then save your changes. 


. Go to the code2-2.css file in your editor. 
. For h1 headings that are direct children of the header element create a style rule to: 


a) Set the text-align property to center, 
b) Set the font family to Impact or sans-serif, and 
c) Set the font size to 3em. 


. For h1 headings that are direct children of the nav element: 


a) Set the font size to 1.2em, 

b) Set the font color to white, 

c) Set the background color to black, and 
d) Set the text-align property to center. 


. For h1 headings that are direct children of the article element, set the font size to 2em and set 


the font family to cursive. 


. For ul elements nested within the nav element, set the list style type to none and set the line 


height to 2em. 


. For all hypertext links in the document, set the font color to ivory and set the text decoration to 


none. 


. For all hyperlinks that are hovered over, set the text decoration to underline. 
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10. Save your changes to the style sheet file and then open code2-2.html in your browser, verifying 
that the appearance resembles that shown in Figure 2-55. Verify that when you hover your 
mouse pointer over the list of sports websites, the text of the link is underlined. 


11. Submit the completed file to your instructor. 


Coding Challenge 3 


Lu 
Q Data Files needed for this Coding Challenge: code2-3_txt.html, code2-3_txt.css, code2-3_layout.css, 
© code2-3_img.png 


An article describing the fresco School of Athens by the Renaissance painter Raphael is shown in 


Figure 2-56. Much of the HTML and CSS code has been created for you. Complete the web page 
design by adding the missing CSS styles. 


Coding Challenge 2-3 example page 
The School of Athens 


By Raphael 


THE Scoot of ATHENS, CONSIDERED BY MANY TO BE 
Raphael's masterwork, is a fresco representing the 
greatest minds of classical antiquity, gathered 
together to share their thoughts and beliefs. The 
fresco was painted between 1509 and 1511 as a part 
of a commission to decorate the rooms of the Stanze 
di Raffaello in the Apostolic Palace in the Vatican. 


The two center figures, Aristotle and Plato, are 
key philosophers in the development of Western 
thought. Plato, with his belief in a higher realty, 
points skyward. Within his hands, Plato holds the 
Timaeus — one of Plato's famous dialogs on the 
nature of reality and time. In contrast. Aristotle points downward, indicating that he is grounded ina 
reality that can be experienced by sight and touch. In his hands, he holds his book Erhics, a tome 
that emphasizes the need for justice, friendship, and ethical government. 


Other famous philosophers fill the pseudo-architecture. In many cases, when Raphael did not 
have classical images to draw upon, he used images of contemporary figures to stand in for their 
classical counterparts. Look for a portrait of Michelangelo on the left-forward steps, his thoughts 
concemed with sketching and art. 


Source: Wikimedia Commons 


Do the following: 


1. Open the code2-3_txt.html and code2-3_txt.css files from the html02 » /code3 folder. Enter 
your name and the date in each document and save the files as code2-3.html and code2-3.css 
respectively. 

2. Go to the code2-3.html file in your editor. Within the head section insert link elements linking 
the page to the code2-3_layout.css and code2-3.css files. Review the contents of the file and 
then save your changes. 

3. Go to the code2-3.css file in your editor. 

4. For the html element, set the left padding space to 30 pixels and set the background color to the 
value hsla(40, 80%, 75%, 0.5). 

5. Display all h1 and h2 headings in a Helvetica, Arial, or sans-serif font. 

6. For all h1 headings: 

a) Set the font size to 3em, 
b) Set the line height to 1em, and 
c) Set the bottom margin to 0. 
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7. For all h2 headings: 
a) Set the top margin to 0, 
b) Set the font style to italic, and 
c) Set the font weight to normal. 
8. For all inline images, set the top and right margins to 0, the bottom margin to 10px, and the left 
margin to 20px. 
9. For all paragraphs, set the font size to 1.4em and set the text indent to 1em. 
10. For the first paragraph, using the first-of-type pseudo-class, set the text indent to 0. 
11. For the first line of the first paragraph, set the font variant to small-caps. (Hint: Use the p:first-of- 
type::first-line pseudo-class and pseudo-element as the selector.) 
12. Save your changes to the file. 
13. View the page in your browser to verify that page resembles Figure 2-56. 
14. Submit the completed file to your instructor. 


Coding Challenge 4 


Data Files needed for this Coding Challenge: code2-4_txt.html, code2-4_txt.css, 
code2-4_layout.css, code2-4_img.png 


DEBU 


You have been given a style sheet file containing several errors. Locate all of the errors and fix the 
file. 


© Courtesy Patrick Carey 


Nea HTML 5 and CSS | Tutorial 2 Getting Started with CSS 


Do the following: 


1. Open the code2-4_txt.html and code2-4_txt.css files from the html02 » /code4 folder. Enter 
your name and the date in each document and save the files as code2-4.html and code2-4.css 
respectively. 

2. Go to the code2-4.html file in your editor. Within the head section insert link elements linking 
the page to the code2-4_layout.css and code2-4.css files. Review the contents of the file and 
then save your changes. 

3. View the code2-4.html file in your browser and compare it to Figure 2-57. Does it match the 
figure? 

4. Test the code2-4.css file in the CSS validator at the W3C website or with another validator of 
your choice. Make a note of the errors reported as a guide to debugging the page. There are six 
syntax errors in the CSS file. 

5. Fix all six errors you discover and then resubmit the saved stylesheet file to validation until it 
passes with no warnings or errors. 

6. View the page in your browser to verify that your page resembles Figure 2-57. 

7. Submit the completed file to your instructor. 


Review Assignments 


Data Files needed for the Review Assignments: coach_styles_txt.css, tss_coach_txt.html, 1 CSS file, 
5 PNG files, 1 TTF file, 1 WOFF file 


Alison has created another page for the Tri and Succeed Sports website providing biographies of the 
coaches at the club. She has already written the page content, acquired image files, and created a 
style sheet for the page layout. She wants you to finish the design of the page by developing a style 
sheet for the page’s color scheme and typography. A preview of the page you'll design is shown in 
Figure 2-58. 


PRACTICE 
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brings an extensive background in physiology and 


She ha: TTT 
¥cling, and briathk 


Kevin fs 4 student 
Bache j 


© Ysbrand Cosijn/Shutterstock.com; © Charles T. Bennett/Shutterstock.com; © ostill/Shutterstock.com; 
© eurobanks/Shutterstock.com; © wavebreakmediaShutterstock.com 


Complete the following: 


1. Use your HTML editor to open the tss_coach_txt.html and coach_styles_txt.css files from the 
html02 » review folder. Enter your name and the date in the comment section of each file, and 
save them as tss_coach.html and coach_styles.css respectively. 

2. Go to the tss_coach.html file in your editor and then within the document head, create links to 
the coach_layout.css and coach_styles.css style sheets. 

3. Take some time to study the content and structure of the file and then close the document, 
saving your changes. 
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. Go to the coach_styles.css file in your editor. At the top of the file and before the comment 


section do the following: 
a. Insert an @charset rule to set the character encoding for the file to utf-8. 


b. Use the @font -face rule to define a web font named Nobile, which is based on the nobile- 
webfont.woff file and, if that format is not supported, on the nobile-webfont.ttf file. 


. Go to the Main Structural Styles section and do the following: 


a. Change the background color of the browser window by creating a style rule for the htm1 
element that sets the background color to the value hsl(27, 72%, 72%). 

b. For the body element, create a style rule to set the text color to the value rgb(91, 91, 91), the 
background color to ivory, and body text to the font stack: Verdana, Geneva, sans-serif. 


. Create a style rule for the body > footer address selector containing the following styles: 


a. The background color set to the value rgb(222, 128, 60) 
b. The font color to white and then to the semitransparent value rgba(255, 255, 255, 0.6) 


c. The font style to normal displayed in bold small capital letters with a font size of 0.9em and a 
line height of 3em using the font stack Nobile, Verdana, Geneva, sans-serif 


d. The text horizontally centered on the page 


. Go to the Heading Styles section and create a style rule for every h1 heading that displays the 


text with a normal font weight from the font stack: Nobile, Verdana, Geneva, sans-serif. Set the 
letter spacing to 0.2em and the margin to 0 pixels. 


. Alison wants you to format the main h1 heading at the top of the page. Create a style rule for the 


section#tss_ coaches hi selector that sets the font size to 2.5em with a color value of hsl(27, 
82%, 85%) and background color of hsI(27, 6%, 21%). Set the left padding space to 10 pixels. 


. Alison also wants you to format the h2 headings for each coach. Create a style rule for the 


article.coach_bio h2 selector that sets the font size to 1.6em with normal weight and the 
font color to rgb(240, 125, 0). 


. Alison has inserted a comment from an athlete about the coaches. Format this comment by 


going to the Blockquote Styles section and creating a style rule for the aside blockquote 
selector to do the following: 


a. Set the font size to 0.95em using the font stack ‘Comic Sans MS’, cursive. 

b. Set the font color to rgb(222, 128, 60) and use a semi-transparent background color with the 
value rgba(255, 2555, 255, 0.75). 

c. Set the padding space to 10 pixels. 

d. Define opening and closing quotes for the element using the Unicode character 201C and 
201D respectively. 


. Format the appearance of the opening quotes by creating a style rule for the aside 


blockquote: : before selector to write a boldfaced open quote before the block quote with the 
font size set to 1.6em from the font stack ‘Times New Roman’, Times, serif. 


. Format the appearance of the closing quotes by creating a style rule for the aside 


blockquote: :after selector to write a boldfaced open quote after the block quote with the 
font size once again set to 1.6em from the font stack ‘Times New Roman’, Times, serif. 


. Next, you'll format the appearance of the navigation list by going to the Navigation Styles 


section and creating a style rule for body > nav selector that sets the text of the navigation list 
in a 0.8em font size with a line height of 2em. 


. Create a style rule for the nav > ul selector that removes the list marker and sets the left 


padding to 5 pixels. 


. Alison wants to break up the long list of links in the navigation list. Create style rules for the 6" 


and 16" 14 elements within the nav > ul selector that sets the size of the top margin of those 
items to 20 pixels. 


. For every previously visited or unvisited hypertext link within the nav > ul > li selector, set the 


text to the RGB color value rgb(151, 151, 151) and remove the underlining from the text link. 


19, 


AO), 
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. For every hovered or active hypertext link within the nav > ul > 1i selector, set the text color 


to RGB value rgb(222, 128, 60) and underline the hypertext link. 


. Go to the Paragraph Styles section and insert a style rule that sets the top margin and bottom 


margin to 10 pixels, the right margin to 30 pixels, and the left margin to O pixels for every 
paragraph in the document. 

Every coach has a list of accomplishments. Go to the List Styles section and insert a style rule for 
the article.coach_bio > header > ul selector that displays the check.png file as the list 
marker and sets the margin space to O pixels, except for the bottom margin, which should be set 
to 10 pixels. 

Save your changes to the style sheet and then open the tss_coach.html file in your browser. 
Verify that the color and typography match that shown in Figure 2-58. Verify that when 

you hover the mouse pointer over the links in the navigation list the text is displayed in an 
underlined orange font. 


APPLY 


Case Problem 1 


Data Files needed for this Case Problem: ph_plays_txt.html, ph_styles_txt.css, 1 CSS file, 
1 PNG file, 3 TTF files, 3 WOFF files 


Philip Henslowe Classic Theatre Randall Chen is the media director for the Philip Henslowe Classic 
Theatre, a regional classical theatre in Coeur d’Alene, Idaho. You've been asked to work on the 
website design for the company. The first page you'll manage lists the plays for next summer’s 
repertoire. A preview of the page is shown in Figure 2-59. 
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Figure 2-59 List of Plays at the Philip Henslowe Classic Theatre 


The upcoming season promises to be our best one yet. Order your tickets now for the plays shown below. 


——— SS 
— 


emits newfie company notes 
The he Merry Woes ¢ - VWindser 


Corpulent mooch and Lrvabout Str John Falstaff decades his path to riches Written By 

hes in Srefing a wealthy woman to woo. He sets about writing identical love William Shakespeare 
letters to two married Ladies in Wuxdsor and though the letters fail to have 

their intended effect, the ladies find it excellent sport to pretend to play Directed By 

Falstaff's game. The result is a hilarious study of marriage and fidelity in one Angela Drake 

of Shakespeare's most popular faces, 


cast § stall 


cast & staff 


Ghe Smportance of Being Carnest 


John Worthing, « careiree voung gentleman has a fictitious brother. "Emest.” Written By 

whose wicked ways alford John an excuse to leave his country home and Oscar Wilde 
journey to London. John's fiend in London. Algemnon Moncrieff, has a 

cousen Gwendolen whom John has wooed under the name of Emest. Yer Directed By 
Gwendoien's mother, Lady Bracknell, refuses to approve the proposed Karen Templeton 


marriage wrilew: JoledEsest can conse up with parents of a more respectable 
natuce than a handbag found at Victoria Station Contused? Don't worry it all comves out welll in Wilde's popular and witty play of love. 
marriage, and mamners. 


Philip Henslowe Classic Theatre 20132 Mounram Dr. « Coewer d Alena, ID 83524 © 208.555.1087 


© Christian Bertrand/Shutterstock.com 


The content and layout of the page has already been created for you. Your job will be to create a 
style sheet for the typography of the page. 


Do the following: 


1. Using your editor, open the ph_plays_txt.html and ph_styles_txt.css files from the html02 > 
casel folder. Enter your name and the date in the comment section of each file, and save them 
as ph_plays.html and ph_styles.css respectively. 

2. Go to the ph_plays.html file in your HTML editor, and within the document head create links 
to the ph_layout.css and ph_styles.css style sheet files. Take some time to study the content and 
structure of the document and then close the file, saving your changes. 


14. 


5, 


16. 
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. Go to the ph_styles.css file in your editor, and at the top of the file before the comment section, 


define the character encoding used in the document as utf-8. 


. Randall has several web fonts that he wants used for the titles of the plays produced by the 


company. Add the following web fonts to the style sheet, using @font - face rules before the 
comment section: 


a. The Champagne font using the cac_champagne.woff and cac_champagne.ttf files 
b. The Grunge font using the 1942.woff and 1942.ttf files 
c. The Dobkin font using the DobkinPlain.woff and DobkinPlain.ttf files 


. Go to the Structural Styles section, creating a style rule that sets the background color of the 


html element to the value hsl(91, 8%, 56%). 


. Add a style rule for the body element to set the background color to the value hsl(58, 31%, 84%) 


and the font of the body text to the font stack: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif. 


. Create a style rule for the header element that sets the background color to black. 
. Create a style rule for every paragraph that sets the margin space to 0 pixels and the padding 


space to 5 pixels on top and 25 pixels on the right, bottom, and left. 


. For paragraphs that are direct children of the body element, create a style rule that sets the font 


size to 1.1em and horizontally centers the paragraph text. 


. Create a style rule for the address element that sets the font style to normal with a font size of 


0.9em, horizontally centered on the page. Set the top and bottom padding to 10 pixels. 


. Next, you'll format the appearance of navigation lists on the page. Go to the Navigation Styles 


section and create a style rule for the nav a selector that displays the hypertext links using the 
font stack ‘Trebuchet MS’, Helvetica, sans-serif, and sets the top and bottom padding to 10 
pixels. 


. For every unvisited and previously visited hypertext link within a nav element, set the text color 


to white, remove underlining from the link text, and set the background color to the semi- 
transparent value hsla(O, 0%, 42%, 0.4). 


. For every active or hovered link in a nav element, set the text color to the semi-transparent value 


hsla(O, 0%, 100%, 0.7) and set the background color to the semi-transparent value hsl(O, 0%, 
42%, 0.7). 

Go to the Section Styles section of the style sheet. In this section, you'll define the appearance of 
the four playbills. You'll start with the h1 headings from the sections. Create a style rule for the 
section.playbill h1 selector that sets the font size to 3em and the font weight to normal. Set 
the margin space around the h1 headings to O pixels. Set the padding space to 20 pixels on top, 
0 pixels on the right, 10 pixels on the bottom, and 20 pixels on the left. 


Each playbill section is identified by a different ID value ranging from play1 to play4. Create 
style rules that set a different background color for each playbill using the following background 
colors: 

ID: play1 set to hsl(240, 100%, 88%) 

ID: play2 set to hsl(25, 88%, 73%) 

ID: play3 set to hsl(O, 100%, 75%) 

ID: play4 set to hsl(296, 86%, 86%) 

Each playbill section heading will also have a different font. For the h1 headings within the four 
different playbills, create style rules to apply the following font stacks: 

ID: play1 set to Champagne, cursive 

ID: play2 set to Grunge, ‘Times New Roman’, Times, serif 

ID: play3 set to Impact, Charcoal, sans-serif 

ID: play4 set to Dobkin, cursive 


. Randall has put the author and the director of each play within a definition list. Format these 


definition lists now by going to the Definition List Styles section and creating a style rule for the 
dt element that sets the font size to 1.3em, the font weight to bold, and the font color to the 
semi-transparent value hsla(O, 0%, 0%, 0.4). 
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18. Create a style rule for every dd element to set the font size to 1.3em, the left margin space to 0 
pixels, and the bottom margin space to 10 pixels. 

19. Save your changes to the file and then open the ph_plays.html file in your browser. Verify that 
the typography and colors used in the document match those shown in Figure 2-54. Also, verify 
that, when you hover the mouse pointer over an item in the navigation lists for the entire page 
and for each play, the background color of the link becomes more opaque. 


Case Problem 2 


Data Files needed for this Case Problem: cw_class_txt.html, cw_styles_txt.css, 1 CSS file, 
2PNG files 


The Civil War and Reconstruction Peter Craft is a professor of military history at Mountain Crossing 
University. The university is offering a series of online courses, one of which is “The Civil War and 
Reconstruction” taught by Professor Craft. He has developed the online content and has had a 
colleague help with the page layout. You’ve been asked to complete the project by creating text and 
color styles. A preview of the sample page is shown in Figure 2-60. 


Figure 2-60 Civil War History home page 


Mountain Crossing on 


Home Courses About 


Course Outline 


I, The Risad to War 
A. tlanting the Sowde 
BL the Few Crisis 
C, Commpeneriiee 6 Fallene 
D, Pout Unes 
fl, Politicians & Germraly 
A. the Etectian of 1800 
B. Potmilans 
C, Generate 
D, The Efeculon of 1884 
ML. The Cauno of War 
® The Anacumds Plan 
B. The Baste: Campaign 
C. The Weetnen Canepaiiyn 


CHALLENGE 


Terms of Use Feedback Help 


About the Course 


O, ant-1ee2 
e. 186) 
fF, Sart 1869 
fv, Aferroth 
A. Lincoln Asabsaination 
B, Racomstraction 
C. A thew Conm@tution 
0. he Unred States & ... 


The Civil War and Reconstruction explores the 
Causes and consequences of the American Civil 
War, covering American history from 1840 through 
1876 in great detail. My primary goal is to 
Interpret the multiple threads that run through this 
epic event and consider how these threads still 
engage the politics and culture of the present day. 
In this course, we will rely heavily on primory 
texts, Interpreting the events of the day through 
the words of those men and women who 
experienced it. We'll examine four main points of 
interest: 


+ The crisis of disunion in a young nation 

« The personality and motivations of the men 
and women who responded to that crists 

« The events of the war which shaped the 
outcome 

© The aftermath ond the unresolved issues that 
came out of the conflict 


Course Structure 


Lectures are provided through podcast or via 
direct download twice weekly with lecture notes 
available through e-mail or RSS feed. A detailed 
summary of the lectures is provided in the links at 
the left 


Peter Craft is a professor of 
American and Military History and 
the Director of the Taylor Institute 
for the Study of Milmary History at 
Mountain Crossing University. He 
is the author of nurnerous books, 
including: Fault Lines: The Causes 
of the Civil War, Day at Cooper 
Union (for which he received the 
Lincoln Prize), and Helen: A 
Memoir, He is also a frequent 
contributor to The Wews Hour and 
the History Channei 


Mountain Crossing University 2017. Uniess otherwise ireficated, all content on this web site is licensed under a Creative Comrmor Licerae. 


Library of Congress, Prints & Photographs Division, Reproduction number LC-DIG-cwpb-01451 (digital file from original 
neg. of left half) LC-DIG-cwpb-01450 (digital file from original neg. of right half) LC-B8184-2288 (b&w film copy neg.); 


© Courtesy Patrick Carey 
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Complete the following: 


Il. 


U2, 


3, 


14. 


18. 


U9, 
20. 


ale 


Using your editor, open the cw_class_txt.html and cw_styles_txt.css files from the html02 » 
case2 folder. Enter your name and the date in the comment section of each file, and save them 
as cw_class.html and cw_styles.css respectively. 


. Go to the cw_class.html file in your HTML editor. Within the document head, create a link to 


the cw_styles.css style sheet file. 

Explore 3. Using the Google Fonts website, locate the Limelight font. Copy the code for the 
link element to use this font and paste the copied code to the document head in the cw_class 
-html file. 


. Study the content and structure of the cw_class.html file and then close the file, saving your 


changes. 


. Go to the ew_styles.css file in your editor. At the top of the file, define the character encoding as 


utf-8. 
Explore 6. On the next line, use the @import rule to import the contents of the cw_layout.css 
file into the style sheet. 


. Go to the Structural Styles section. Within that section create a style rule to set the background 


color of the browser window to rgb(151, 151, 151). 


. Create a style rule to set the background color of the page body to rgb(180, 180, 223) and set 


the body text to the font stack: Verdana, Geneva, sans-serif. 


. Display all h1 and h2 headings with normal weight. 
. Create a style rule for every hypertext link nested within a navigation list that removes 


underlining from the text. 


. Create a style rule for the footer element that sets the text color to white and the background 


color to rgb(101, 101, 101). Set the font size to 0.8em. Horizontally center the footer text, and 
set the top/bottom padding space to 1 pixel. 


Next, you'll format the body header that displays the name of the university. Go to the Body 
Header Styles section and, for the body > header selector, create a style rule that sets the 
background color to rgb(97, 97, 211). 

The university name is stored in an h1 heading. Create a style rule for the h1 heading that is 

a direct child of the body header that sets the font size to 4vw with the color value rgba(255, 
255, 255, 0.8). Display the text with the font stack: Limelight, cursive. Set the margin space to 0 
pixels. 

The last word of the h1 heading text is enclosed within a span element. Create a style rule for 
the span element nested within the h1 heading that is nested within the body header, setting the 
text color to rgba(255, 255, 255, 0.4). 


. Go the Navigation Styles section. In this section, you format the navigation list that has the ID 


mainLinks. For hypertext links within this navigation list, set the top and bottom padding space 
to 5 pixels. 


. For previously visited and unvisited links within the mainLinks navigation list, create a style rule 


that displays the hypertext links in a white font. 


. For hovered or active links within the mainLinks navigation list, create a style rule that displays 


the hypertext links in white with an opacity of 0.8 and set the background color to the value 
rgba(51, 51, 51, 0.5). 

Go to the Outline Styles section. In this section, you'll format the course outline that appears on 
the page’s left column. The navigation list in this outline has the ID outline. Create a style rule 
for this navigation list that sets the text color to rgb(51, 51, 51) and the font size to 0.8em. 
Horizontally center the h1 headings within the outline navigation list. 

For the first level 01 elements that are a direct child of the outline navigation list, create a style 
rule that sets the line height to 2em, the top/bottom margin to O pixels and the left/right margin 
to 5 pixels. Display the list marker as an upper-case Roman numeral. 

Display the second level of o1 elements nested within the outline navigation list with an upper- 
case letter as the list marker. 
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22. Display all previously visited and unvisited links in the outline navigation list using the color 
value rgb(101, 101, 101). 

23. Display hovered and active links in the outline navigation list using the color value rgb(97, 97, 
211) with the text underlined. 

24. Go to the Section Styles section. In this section, format the description of the course. Create a 
style rule that sets the background color of the section element to rgb(220, 220, 220). 

25. Format the heading of this section by creating a style rule for the section header h1 selector 
that sets the font size of 2.2em and the left padding space to 10 pixels. 

26. Go to the Article Styles section and create a style rule for h2 headings within the article 
element that sets the font size to 1.4em. 

€5 Explore 27. Display the first letter of the first paragraph within the article element with a 
font size of 2em and vertically aligned with the baseline of the surrounding text. (Hint: Use the 
first-of-type pseudo-class and the first-letter pseudo-element.) 

28. Information about Peter Craft has been placed in an aside element. Go to the Aside Styles 
section and create a style rule that sets the font size of text in the aside element to 0.9em. 

29. For h1 headings nested within the aside element, create a style rule that sets the font size to 
1.4em and horizontally centers the text. 

30. Save your changes to the file and then open the cw_class.html file in your browser. Verify that 
the appearance of the page resembles that shown in Figure 2-60. Confirm that when you change 
the width of the browser window, the size of the page heading text changes in response to setting 
the heading text using the vw unit. 


TUTORIAL 3 


OBJECTIVES 


Session 3.1 

° Create a reset style sheet 

¢ Explore page layout designs 
¢ Center a block element 

* Create a floating element 

¢ Clear a floating layout 

e Prevent container collapse 


Session 3.2 

e Use CSS grid styles 

¢ Define a grid layout 

e Place items within a grid 

¢ Work with grid areas 

Session 3.3 

¢ Explore positioning styles 

¢ Work with relative positioning 
¢ Work with absolute positioning 
¢ Work with overflow content 


STARTING DATA FILES 


pc_about_txt.html 
pc_home_txt.html 
pc_info_txt.html 


Layout 


Designing a Page 


= 
_ 
— 


Creating a Website for a Chocolatier 


Case | Pandaisia Chocolates 


Anne Ambrose is the owner and head chocolatier of Pandaisia 
Chocolates, a chocolate shop located in Essex, Vermont. You have 
been asked to assist on the redesign of the company’s website. Anne 
has provided you with three pages from the website to start your 
work. She has written all of the content, compiled the necessary 
images and graphics, and written some of the text and color styles. 
She needs you to complete the project by designing the page layout 


using the CSS layout properties. 


pc_specials_txt.html 
pc_specials_txt.css 
+ 12 files 


pc_grids_txt.css 
pc_home_txt.css 


pc_reset_txt.css 


+ 22 files 


code3-2_txt.html 
code3-2_layout_txt.css 


+1 file 


sp_home_txt.html 
sp_layout_txt.css 


+ 13 files 


code3-3_txt.html 
code3-3_scroll_txt.css 
+ 10 files 


ss_dday_txt.html 
ss_layout_txt.css 
+ 4 files 


code3-1_txt.html 
code3-1_float_txt.css 
+ 11 files 


code3-4_txt.html 
debug3-4_txt.css 
+ 2 files 


demo_grid1.html 
demo_grid2.html 
demo_positioning.html 
+ 6 files 
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Session 3.1 Visual Overview: 


Ge horizontally center 
a block element, set 
the left and right 

margins to auto. 


The width property defines ) 
the width of an element, the 

max-width property sets : 
its maximum possible width, , rights 
the min-width property 
sets its minimum width. 


All horizontal list items 
are floated on the left to 
create columns. 


The float property ice | 
an object out of normal 
document flow and floats 
it on the left or right 
margin of its container 
element. 


[ metcert aft J 


The clear property displays ~ 
the element only when the Meccts The left and right column 
left, right, or both floated Slates lah i sections are floated with 
objects have been cleared. widths : widths of 33% and 67%, 
: respectively. 


The display property 
defines how an element Lj 
should be laid out. 


The vertical navigation list 
and contactInfo section are 


floated as separate columns. ts = Steatiegviewnthae { 


width: 


To prevent an element 
containing only floated 
elements from collapsing, 

use the after pseudo-element 
and the content property to 
\eoemerate a placeholder element. 
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Page Layout with Floating Elements 


Page body is horizontally 
centered within the 
browser window. 


Horizontal list items 
are floated into 
separate columns. 
Pandaisia Chocolates has been 
creating gourmet chocolates and 
sveeets for happy customers since 
1993. Our hand-dipped truffles, 
savory chocolates, and mouth 
watering toffees are made from the 
finest organic cacao, We use only 
natural ingredionts with wildflower 
honey replacing corn syrup and 
cream that comes fresh from local 
dairy farms. Chocolate is an art . ‘. iB 
come tour our gallery. ; ; Left and right sections 
are floated into 
separate columns. 


© Brenda Carson/Shutterstock.com; 


© Brent Hofacker/Shutterstock.com; 
The contents of the [Pele © Jim Bowie/Shutterstock.com; 


footer are floated into © wacomkaShutterstock.com; 
separate columns. © Shebeko/Shutterstock.com; 
Source: Facebook; 
Source: Twitter, Inc. 
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Introducing the display Style 


The study of page layout starts with defining how an individual element is presented on 
the page. In the first tutorial, you learned that HTML elements are classified into block 
elements, such as paragraphs or headings, or into inline elements, such as emphasized 
text or inline images. However, whether an element is displayed as a block or as inline 
depends on the style sheet. You can define the display style for any page element with 
the following display property 


display: type; 


where type defines the display type. A few of the many type values are shown 
in Figure 3-1. 


Some values of the display property 


You also can hide elements 
by applying the style 
visibility: hidden;, 
which hides the element 
content but leaves the 
element still occupying the 
same space in the page. 


Display Value | Appearance 


block Displayed as a block 

table Displayed as a web table 

inline Displayed inline within a block 

inline-block Treated as a block placed inline within another block 

run-in Displayed as a block unless its next sibling is also a block, in which case, it is 
displayed inline, essentially combining the two blocks into one 

inherit Inherits the display property of the parent element 

list-item Displayed as a list item along with a bullet marker 

none Prevented from displaying, removing it from the rendered page 


For example, to supersede the usual browser style that displays images inline, you 
can apply the following style rule to display all of your images as blocks: 


img {display: block; } 


If you want to display all block quotes as list items, complete with list markers, you 
can add the following style rule to your style sheet: 


blockquote {display: list-item;} 


You can even prevent browsers from displaying an element by setting its display 
property to none. In that case, the element is still part of the document structure but it 
is not shown to users and does not occupy space in the displayed page. This is useful 
for elements that include content that users shouldn't see or have no need to see. 

You'll use the display property in creating a reset style sheet. 


Creating a Reset Style Sheet 


You learned in the last tutorial that your browser applies its own styles to your page 
elements unless those styles are superseded by your own style sheet. Many designers 
prefer to work with a “clean slate” and not have any browser style rules creep into the final 
design of their website. This can be accomplished with a reset style sheet that supersedes 
the browser's default styles and provides a consistent starting point for page design. 
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You'll create a reset style sheet for the Pandaisia Chocolates website. The first style 
rule in your sheet will use the display property to display all of the HTML 5 structural 
elements in your web page as blocks. While current browsers already do this, there 
are some older browsers that do not recognize or have predefined display styles for 
elements as such header, article, or footer. By including the display property 
in a reset style sheet, you add a little insurance that these structural elements will be 
rendered correctly. 


To create a reset style sheet: 


BD 1. Use the text editor or HTML editor of your choice to open the pe_reset_txt.css 
file from the html03 > tutorial folder. Enter your name and the date in the 
comment section of the file and save the document as pc_reset.css. 


D 2. Within the Structural Styles section, insert the following style rule to define 
the display properties of several HTML 5 structural elements: 


article, aside, figcaption, figure, 
footer, header, main, nav, section { 
display: block; 


i 
Figure 3-2 highlights the new style rule in the document. 


Figure 3-2 Displaying structural elements as blocks 


You will complete the reset style sheet by adding other style rules that set default 
padding and margins around commonly used page elements, define some basic 
typographic properties, and remove underlining from hypertext links found within 
navigation lists. 


To complete the reset style sheet: 


BD 1. Within the Typographic Styles section, insert the following style rule to define 
the typographic styles for several page elements: 


address, article, aside, blockquote, body, cite, 
div, dl, dt, dd, em, figcaption, figure, footer, 
hi, h2, h3, h4, h5, h6é, header, html, img, 
li, main, nav, ol, p, section, span, ul { 


background: transparent; 
font-size: 100%; 

margin: 0; 

padding: 0; 
vertical-align: baseline; 


ENE” =HTML 5 and CSS | Tutorial 3 Designing a Page Layout 


BD 2. Add the following style rules to remove list markers from list items found 
within navigation lists: 


nav ul { 


list-style: none; 
list-style-image: none; 


nav a { 
text-decoration: none; 


} 


D 3. Set the default line height to 1 (single-spaced) by applying the following style 
rule to the page body: 


body { 
line-height: 1; 


} 


Figure 3-3 describes the new style rules in the document. 


Figure 3-3 Completing the reset style sheet 


aelzes dhe address, article, aside, blockquote, body, cite, 
background color 


transparent 


div, dl, dt, dd, em, figcaption, figure, footer, 
hi, h2, h3, h4, h5, h6, header, html, img, 
Li, main, nav, ol, p, section, span, ul f{ 


background: transparent; 


font-size: 100%} sets the font size 
removes all margin: 03 equal to the font 
margin and | 1 tad Be size of the parent 


. > 
\ Bedding epeces ) vertical-align: 


} 
aligns all 
4 
ae with the nav ul { does not display markers 
ese INS list-style: none; for unordered lists within 
list-style-image: none; | navigation lists 
} 
xe P y 
nav a { does not underline 
text-decoration: none;<—j hypertext links within 
} navigation lists 
q 


body { ail 
2 Saale a » te single spaces 
— } xe 
: line-height: 15 Alllaahncsst 
J 


BD 4. Save your changes to the file. 
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This is a very basic reset style sheet. There are premade reset style sheets freely 
available on the web that contain more style rules used to reconcile the various 
differences between browsers and devices. Before using any of these reset style sheets, 
you should study the CSS code and make sure that it meets the needs of your website. 
Be aware that some reset style sheets may contain more style rules than you actually 
need and you can speed up your website by paring down the reset sheet to use only 
the elements you need for your website. 

The first page you will work on for Pandaisia Chocolates is the site’s home page. 
Anne has already created a typographical style sheet in the pc_styles1.css file. Link 
to the style sheet file now as well as the pc_reset.css style sheet you just created and 
the pc_home.css style sheet that you will work on for the remainder of this session to 
design the page layout. 


To get started on the Pandaisia Chocolates home page: 


D 1. Use your editor to open the pc_home_txt.css file from the html03 > tutorial 
folder. Enter your name and the date in the comment section of the file and 
save the document as pe_home.css. 


D 2. Use your editor to open the pe_home_txt.html file from the same folder. 
Enter your name and the date in the comment section and save the file as 
pc_home.htnl. 


D 3. Within the document head, directly after the title element, insert the following 
The reset style sheet link elements to link the home page to the pc_reset.css, pc_styles1.css and 


should always be the first pc_home.css style sheets: 
style sheet listed before 
any other style sheets to 
ensure that your default <link href="pc_stylesl.css" rel="stylesheet" /> 


styles are applied first. <link href="pc_home.css" rel="stylesheet" /> 


<link href="pc reset.css" rel="stylesheet" /> 


D 4. Take some time to study the content and structure of the pc_home.html| 
document. Pay particular attention to the use of ID and class names throughout 
the document. 


BD 5. Save your changes to the file. You might want to keep this file open as you 
work with the pc_home.css style sheet so that you can refer to its content 
and structure. 


Anne has sketched the general layout she wants for the home page, shown in 
Figure 3-4. Compare the pc_home.html file content to the sketch shown in Figure 3-4 to 
get a better understanding of how the page content relates to Anne’s proposed layout. 
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Figure 3-4 Proposed home page layout 


Pandaisia Chocolates 


> 


nn... horizontal 
Home Online Store MyAccount — Specials Contact Us navigation list 


a 
[left column section } > a right column 
— section 


footer 


( vertical navigation ists | (horizontal navigation ist 


Before creating the page layout that Anne has sketched out for you, you'll examine 
different types of layout designs. 


Exploring Page Layout Designs 


One challenge of layout is that your document will be viewed on many different 
devices with different screen resolutions. When designing for the web, you're usually 
more concerned about the available screen width than screen height because users can 
scroll vertically down the length of the page, but it is considered bad design to make 
them scroll horizontally. 

A page designer needs to cope with a wide range of possible screen widths ranging 
from wide screen monitors with widths of 1680 pixels or more, down to mobile 
devices with screen widths of 320 pixels and even less. Complicating matters even 
more is that a screen width represents the maximum space available to the user, but 
some space is always taken up by toolbars, sidebar panes, and other browser features. 
In addition, the user might not even have the browser window maximized to fill the 
entire screen. Thus, you need a layout plan that will accommodate a myriad of screen 
resolutions and browser configurations. 


Fixed, Fluid, and Elastic Layouts 


Web page layouts fall into three general categories: fixed, fluid, and elastic. A fixed layout 
is one in which the size of the page and the size of the page elements are fixed, usually 
using pixels as the unit of measure. The page width might be set at 960 pixels and the 
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width of the company logo set to 780 pixels. These widths are set regardless of the screen 
resolution of the user’s device and this can result in the page not fitting into the browser 
window if the device’s screen is not wide enough. 

By contrast, a fluid layout sets the width of page elements as a percent of the 
available screen width. For example, the width of the page body might be set to fill 
90% of the screen and the width of the company logo might be set to fill 80% of that 
page body. Under a fluid layout, the page resizes automatically to match the screen 
resolution of the user’s device. Figure 3-5 shows how a three-column layout might 
appear in both a fixed and a fluid design. 


Fixed layouts vs. fluid layouts 


1280px 100% 
—— OO 
FIXED FLUID 


256px 512px 512px 20% 40% 40% 
fixed layouts stay the same size fluid layouts change with 
regardless of screen resolution the screen resolution 


With different devices accessing your website, it’s usually best to work with a fluid 
layout that is more adaptable to a range of screen resolutions. Fixed layouts should only 
be used when you have more control over the devices that will display your page, such 
as a web page created specifically for a digital kiosk at a conference. 

Another layout design is an elastic layout in which all measurements are expressed 
in em units and based on the default font size used in the page. If a user or the designer 
increases the font size, then the width, height, and location of all of the other page 
elements, including images, change to match. Thus, images and text are always sized 
in proportion to each other and the layout never changes with different font sizes. The 
disadvantage to this approach is that, because sizing is based on the font size and not 
on the screen resolution, there is a danger that if a user sets the default font size large 
enough, the page will extend beyond the boundaries of the browser window. 

Finally, the web is moving quickly toward the principles of responsive design in 
which the layout and design of the page change in response to the device that is 
rendering it. The page will have one set of styles for mobile devices, another for tablets, 
and yet another for laptops or desktop computers. You'll explore how to implement 
responsive design in Tutorial 5. 

Because width is such an integral part of layout, you will start designing the 
Pandaisia Chocolates home page by defining the width of the page body and elements 
within the page. 
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Working with Width and Height 


The width and height of an element are set using the following width and height 
properties 


width: value; 
height: value; 


where value is the width or height using one of the CSS units of measurement or as 

a percentage of the width or height of the parent element. For example, the following 
style rule sets the width of the page body to 95% of the width of its parent element (the 
browser window): 


body {width: 95%;} 


Usually, you do not set the height value because browsers automatically increase 
the height of an element to match its content. Note that all block elements, like the 
body element, have a default width of 100%. Thus, this style rule makes the body 
element width slightly smaller than it would be by default. 


Setting Maximum and Minimum Dimensions 


You can set limits on the width or height of a block element by applying the following 
properties 


min-width: value; 
min-height: value; 
max-width: value; 
max-height: value; 


where value is once again a length expressed in one of the CSS units of measure (usually 
pixels to match the measurement unit of the display device). For example, the following 
style rule sets the width of the page body to 95% of the browser window width but 
confined within a range of 640 to 1680 pixels: 


body { 
width: 95%; 
min-width: 640px; 
max-width: 1680px; 


} 


Maximum and minimum widths are often used to make page text easier to read. Studies 
have shown that lines of text that are too wide are difficult to read because the eye has 
to scan across a long section of content and that lines of text that are too narrow with 
too many line returns break the flow of the material. 


REFERENCE 
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Setting Widths and Heights 
¢ To set the width and height of an element, use the styles 


width: value; 
height: value; 


where value is the width or height in one of the CSS units of measurement or a 
percentage of the width or height of the parent element. 


To set the minimum possible width or height, use the styles 


min-width: value; 
min-height: value; 


To set the maximum possible width or height, use the styles 


max-width: value; 
max-height: value; 


Set the width of the page body for the Pandaisia Chocolates home page to 95% 
of the browser window ranging from 640 pixels to 960 pixels. Also display the 
company logo image as a block with its width set to 100% so that it extends across 
the page body. You do not have to set the height of the logo because the browser will 
automatically scale the height to keep the original proportions of the image. 


To set the initial dimensions of the page: 


BD 1. Return to the pe_home.css file in your editor and add the following style rule 
to the Body Styles section: 


body { 
max-width: 960px; 
min-width: 640px; 
width: 95%; 


} 


BD 2. Within the Body Header Styles section, insert the following style rule to set 
the display type and width of the logo image: 


body > header > img { 
display: block; 
width: 100%; 


} 
Figure 3-6 highlights the newly added style rules in the style sheet. 
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Setting the width of the page body and logo 


/* Body Styles */ 


body { 

max-width: 960px; 
min-width: 640px3; 
width: 95%3 


web page width is 95% 
of the browser window 
ranging from 640 pixels 
to 960 pixels 


} 


/ 


/* Body Header Styles */ 


displays the logo image 
as a block element 


body > header > img { 
display: block; 


sets the width of the logo width: 100%} 
to 100% of the page body } 


BD 3. Save your changes to the file and then open the pe_home.html file in your 
browser. Figure 3-7 shows the current layout of the page body and logo. 


Figure 3-7 Initial view of the body header 
browser window 
background 


page body width is 95% 
of the browser window 


logo is 100% of the 
body width 


body background 


BD 4. Change the width of your browser window and verify that the size of the 


page body and the size of the logo resize as needed within the range of 640 
to 960 pixels. 


The page body is currently placed on the left margin of the browser window. Anne 
would like it centered horizontally within the browser window. 
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Centering a Block Element 


Block elements can be centered horizontally within their parent element by setting 
both the left and right margins to auto. Thus, you can center the page body within the 
browser window using the style rule: 


body { 
margin-left: auto; 
margin-right: auto; 


} 


Modify the style rule for the page body to center the Pandaisia Chocolates home 
page horizontally by setting the left and right margins to auto. 


To center the page body horizontally: 


BD 1. Return to the pe_home.ess file in your editor and, within the style rule for the 
body selector, insert the properties: 


margin-left: auto; 
margin-right: auto; 


Figure 3-8 highlights the newly added styles. 


Figure 3-8) 3-8 Centering the page body 


setting the left and right 
margins to auto forces 


y { 
margin-left: auto; 
neal Soe eats block elements to be 
Ee —_ horizontally centered 
: na within their parent 


“y 


BD 2. Save your changes to the file and then reload the pc_home.html file in your 
browser. Verify that the page body is now centered within the browser window. 
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Working with Element Heights 


The fact that an element's height is based on its content can cause some confusion. 
For example, the following style rule appears to set the height of the header to 50% of 
the height of the page body: 


body > header {height: 50%;} 


However, because the total height of the page body depends on the height of 
its individual elements, including the body header, there is circular reasoning in this 
style rule. You can’t set the page body height without knowing the height of the body 
header and you can’t set the body header height unless you know the height of the 
page body. Most browsers deal with this circularity by leaving the body header height 
undefined, resulting in no change in the layout. 

Heights need to be based on known values, as in the following style rules where 
the body height is set to 1200 pixels and thus the body header is set to half of that or 
600 pixels. 


body {height: 1200px; } 
body > header {height: 50%;} 


It is common in page layout design to extend the page body to the height of the 
browser window. To accomplish this, you set the height of the html element to 100% 
so that it matches the browser window height (a known value defined by the physical 
properties of the screen) and then you set the minimum height of the page body to 
100% as in the following style rules: 


html {height: 100%; } 
body {min-height: 100%; } 


The result is that the height of the page body will always be at least equal to the height 
of the browser window, but it will extend beyond that if necessary to accommodate extra 
page content. 


Vertical Centering 


Centering an element vertically within its parent element is not easily accomplished 
because the height of the parent element is usually determined by its content, which 
might not be a defined value. One solution is to display the parent element as a table 
cell with a defined height and then set the vertical-align property set to middle. 
For example, to vertically center the following h1 heading within the div element 


<div> 
<hl>Pandaisia Chocolates</h1> 
</div> 


you would apply the style rule: 
div { 
height: 40px; 
display: table-cell; 


vertical-align: middle; 


} 
Using this style rule, the h1 heading will be vertically centered. 
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To vertically center a single line of text within its parent element, set the line height 
of the text larger than the text's font size. The following style rule will result in an 
h1 heading with vertically centered heading text. 


h1 { 
font-size: 1.4em; 
line-height: 2em; 


} 


Note that this approach will only work for a single line of text. If the text wraps to a 
second line, it will no longer be vertically centered. Vertical centering is a common design 
challenge and there are several other workarounds that have been devised over the years. 
The simplest approach is to use CSS grid styles, a topic that we'll discuss in the next session. 

Next, you will lay out the links in the navigation list. Anne wants the links displayed 
horizontally rather than vertically. You can accomplish this using CSS floats. 


Floating Page Content 


By default, content is displayed in the page in the order it appears within the HTML file 
as part of the normal document flow. Floating an element takes it out of position and 
places it along the left or right edge of its parent element. Subsequent content that is 
not floated occupies the space previously taken up by the floated element. Figure 3-9 
shows a diagram of an element that is floated along the right margin of its container 
and its effect on the placement of subsequent content. 


Figure 3-9 Floating an element 


original layout element is floated on the right margin 
and the subsequent page content 
wraps around it 


To float an element, apply the following £loat property 
float: position; 


where position is none (the default), left to float the object on the left margin, or 
right to float the object on the right margin. If sibling elements are floated along the 
same margin, they are placed alongside each other within a row as shown in Figure 3-10. 
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Figure 3-10 Floating multiple elements in a row 


original layout when several elements are floated on the 
same margin, they are aligned within a row 


Note that for the elements to be placed within a single row, the combined width 
of the elements cannot exceed the total width of their parent element, otherwise any 
excess content will automatically wrap to a new row. 


Floating an Element 
* To float an element within its container, apply the style 
loses jooSalics erp 


where position is none (the default), left, or right. 
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Anne wants you display the content of navigation lists belonging to the 
horizontalNavigation class within a single row. You will accomplish this by floating 
each item in those navigation lists on the left margin using the £loat property. Create 
this style rule now. 


To lay out horizontal navigation list items: 


BD 1. Return to the pe_home.css file in your editor and go to the Body Header 
Styles section. 


» 2. 
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D 3. Insert the following style rule within the Horizontal Navigation Styles section 
to display every list item within a horizontal navigation list as a block floated 
on the left. 


nav.horizontalNavigation li { 
display: block; 
float: left; 


} 
Figure 3-11 highlights the styles used with list items. 


Figure 3-11) Floating items in the navigation list 


/ 


/* Body Header Styles */ 


body > header > img f{ 
display: block; 
width: 100%; 

} 


sets the width of 
the list item to 20% 


body > header > nav.horizontalNavigation li { 
of the width of the width: 20%; 
navigation list | } 


/* Horizontal Navigation Styles */ 


nav.horizontalNavigation li { (floats the list item 


display: block; within every horizontal 
float: left; navigation list as a 


block on the left 


BD 4. Save your changes to the file and then reload the pc_home.html file in your 
browser. Figure 3-12 shows the revised layout of the navigation list in the 
page header. 


Figure 3-12 Floating items in a horizontal navigation list 


the width of each 
list item set to 20% 
and floated on the 
left margin 


Anne doesn’t like the appearance of the hypertext links in the navigation list. Because 
the links are inline elements, the background color extends only as far as the link text. She 
suggests you change the links to block elements and center the link text within each block. 
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To change the display of the hypertext links: 
BD 1. Return to the pe_home.ecss file in your editor. 


BD = 2. Within the Horizontal Navigation Styles section, insert the following style rule to 
format the appearance of the hypertext links within the horizontal navigation lists: 


nav.horizontalNavigation a { 
display: block; 
text-align: center; 


} 
Figure 3-13 highlights the style rule for the hypertext links. 


Figure 3-13 Formatting hyperlinks in horizontal navigation lists 


/* Horizontal Navigation Styles */ 


nav.horizontalNavigation li { 
display: block; 
float: left; 


} 

nav.horizontalNavigation a { Teen 
centers the display: block;<————___—— ne nee 
link text within text-align: center; 


the block 


BD 3. Save your changes to the file and then reload the pc_home.html file in 
your browser. 
BD 4. Hover your mouse pointer over the links in the navigation list. Note that the 


link text is centered within its block and the background color extends fully 
across the block rather than confined to the link text. See Figure 3-14. 


each hypertext 
link displayed as 
a block with the 
link text centered 
within the block 


Trouble? Don't worry about the jumble of elements displayed after the body 
header. You'll straighten out those objects next. 


You have completed the design of the body header. Next, you will lay out the middle 
section of the home page. 


INSIGHT 
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Creating Drop Caps with CSS 


A popular design element is the drop cap, which consists of an enlarged initial letter 
that drops down into a body of text. To create a drop cap, you increase the font size 
of an element's first letter and float it on the left margin. Drop caps also generally 
look better if you decrease the line height of the first letter, enabling the surrounding 
content to better wrap around the letter. Finding the best combination of font size 
and line height is a matter of trial and error, and unfortunately, what looks best in 
one browser might not look as good in another. The following style rule works well in 
applying a drop cap to the first paragraph element: 


p:first-of-type::first-letter { 
font-size: 4em; 
fil Oaieeel eter 
line-height: 0.8; 


} 


For additional design effects, you can change the font face of the drop cap to a 
cursive or decorative font. 


Clearing a Float 


In some layouts, you will want an element to be displayed on a new row, clear of 
previously floated objects. To ensure that an element is always displayed below your 
floated elements, apply the following clear property: 


clear: position; 


where position is left, right, both, or none. A value of left displays the element 
only when the left margin is clear of floating objects. A value of right displays the 
element only when the right margin is clear. A value of both displays the element only 
when both margins are clear of floats. The default clear value is none, which allows the 
element to be displayed alongside any floated objects. 

Figure 3-15 shows how use of the clear property prevents an element from being 
displayed until the right margin is clear of floats. The effect on the page layout is that 
the element is shifted down and is free to use the entire page width since it is no longer 
displayed alongside a floating object. 


Clearing a float 


clear: right; 


original layout floating an element on the last element is displayed once 
right margin the right margin is clear of 
floated objects 
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Clearing a Float 


¢ To display a non-floated element on a page with a floated element, use the following 
style so the non-floated element can clear the floated element 


clear: position; 


where position is none (the default), left, right, or both. 


The next part of the Pandaisia Chocolates home page contains two section elements 
named leftColumn and rightColumn. Set the width of the left column to 33% of the body 
width and set the width of the right column to 67%. Float the sections side-by-side on 
the left margin, but only when the left margin is clear of all previously floated objects. 


To float the left and right column sections: 


BD 1. Return to the pe_home.ess file in your editor. Go to the Left Column Styles 
section and insert the style rule: 


section#leftColumn { 


. Within the Right Column Styles section, insert: 


clear: left; 
float: left; 
width: 33%; 

} 

’ 2 

section#rightColumn { 
float: left; 
width: 67%; 


} 


Note that you do not apply the clear property to the right column because you 
want it to be displayed in the same row alongside the left column. Figure 3-16 
highlights the style rules for the left and right columns. 


displays the left 
column once the left 
margin is clear of 


previously floated 
elements 


floats the right 
column alongside 
the left column with 
a width of 67% 


teft Column Styles 


section#leftColumn { 
lear: left; 


float: left; 
width: 33%; 


section#rightColumn { 
float: left; 
width: 67%3 


Figure 3-16 J 3-16 Float the left and right column sections 


floats the left column 
on the left margin 


with a width of 33% 
of the page body 
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The right column contains a horizontal navigation list containing four items, each 
consisting of an image and a label above the image. Anne wants the four items placed 
side-by-side with their widths set to 25% of the width of the navigation list. Anne also 
wants the images in the right column displayed as blocks with their widths set to 100% 
of their parent element. 


To complete the right column section: 


BD 1. Within the Right Column Styles section, insert the following style rules to 
format the inline images and list items: 


section#rightColumn img { 
display: block; 
width: 100%; 


} 


section#rightColumn > nav.horizontalNavigation li { 
width: 25%; 


} 


Note that you do not have to include a style rule to float the items in the 
horizontal navigation list because you have already created that style rule in 
Figure 3-11. Figure 3-17 describes the new style rules in the style sheet. 


Figure 3-17 Formatting the right column section 


frightColumn { 


left: 


: 


displays every image 
in the right column as 
a block with a width 
equal to the width of 


ection#trightColumn img { 
display: ai 


dth: H 


} its parent element 
sets the width of - : 
each list item to 25% ection#rightColumn > nav.horizontalNavigation li { 
of the width of the width: 25%; 
navigation list } 


BD 2. Save your changes to the file and then reload the pc_home.html file in your 
browser. Figure 3-18 shows the layout of the left and right column sections. 
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Figure 3-18 Layout of the left and right columns 


left column occupies 
33% of the width of 
the page body 


right column 
occupies 67% 
of the width 


horizontal navigation 

list with each image 

and label set to 25% © Brenda Carson/Shutterstock.com; © Brent Hofacker/Shutterstock.com; © Jim Bowie/Shutterstock.com; 
of the list width © wacomkaShutterstock.com; © Shebeko/Shutterstock.com 


Anne doesn’t like that the text in the left column crowds the right column and page 
boundary. She suggests that you provide more interior space by increasing the padding 
in the left column. 


To increase the left column padding: 
BD 1. Return to the pe_home.css file in your editor and go to the Left Column 
Styles section. 


D 2. Insert the property padding: 1.5em; into the sect ion#1eftColumn style rule 
as shown in Figure 3-19. 


Increasing the padding of the left column 


/* Left Column Styles */ 


section#leftcolumn { 
clear: Left; 


float: left; . —— 

padding: 1.5em3 increases the interior 
e b&¢ s2 ; 

width: 33%3 padding to 1.5em 
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BD 3. Save your changes to the style sheet and then reload the pc_home.html file 
in your browser. Figure 3-20 shows the result of your change. 


Figure 3-20 Page layout crashes with increased padding 


increased padding 
increases the width 
of the left column, 
making it bigger 
than 33% of the 
page body width 


the right column is 
forced to wrap to 
a new row, ruining 
the page layout 


© Brenda Carson/Shutterstock.com; Source: Facebook; Source: Twitter, Inc. 


This simple change has caused the layout to crash. What went wrong? 


Refining a Floated Layout 


When the total width of floated objects exceeds the width of their parent, excess 
content is automatically wrapped to a new row. The reason the layout for the Pandaisia 
Chocolates home page crashed is that increasing the padding in the left column, 
increased the column’s width beyond its set value of 33%. Even this small increase 
caused the total width of the two columns to exceed 100% and, as a result, the right 
column moved to a new row. 

To keep floats within the same row, you have to understand how CSS handles 
widths. Recall that block elements are laid out according to the box model, as 
illustrated previously in Figure 2-38, in which the content is surrounded by the padding 
space, the border space, and finally the margin space. By default, browsers measure 
widths using the content box model in which the width property only refers to the 
width of the element content and any padding or borders constitute added space. 

CSS also supports the border box model, in which the width property is based on 
the sum of the content, padding, and border spaces and any space taken up by the 
padding and border is subtracted from space given to the content. Figure 3-21 shows 
how the two different models interpret the same width, padding, and border values. 
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Figure 3-21 Comparing the content box and border box models 


Content Box model 


< Total Width = 230px > 


Border Box model 


Style Properties 


width: 200px; 
padding: 10px; 
border: 5px; 


+ Total Width = 200px ——_______» 


You can choose the layout model using the following box-sizing property 


Height values are similarly box-sizing: type; 
affected by the type of 
layout model used. where type is content -box (the default), border-box, or inherit (to inherit the 


property defined for the element’s container). Many designers prefer to use the border 
box model in page layout so that there is no confusion about the total width of each 
element. 


Defining How Widths Are Interpreted 
¢ To define what the width property measures, use the style: 
box-sizing: type; 


where type is content -box (the default), border-box, or inherit (to inherit the 
property defined for the element's container). 


REFERENCE 


Add the box-sizing property to the reset style sheet and apply it to all block elements. 
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To set the block layout model: 
BD 1. Return to the pe_reset.css file in your editor. 


BD 2. Add the following style property to the style rule for the list of block 
elements: 


box-sizing: border-box; 


Figure 3-22 highlights the revised style rule. 


Figure 3-22 Adding the border-box style to the reset style sheet 


address, article, aside, blockquote, body, cite, 
div, dl, dt, dd, em, figcaption, figure, footer, 
hi, h2, h3, h4, h5,; h6, header, html, img, 
li, main, nav, ol, p, section, span, ul f{ 
background: transparent; 
font-size: 100%; 
margin: 03 


padding: 05 


applies border-box vertical-align: baseline; 
sizing to all of the 


listed block elements 


box-sizing: border-box; 


BD 3. Save your changes to the style sheet and then reload the pc_home.html file 
in your browser. Verify that the layout of the left and right columns has been 
restored and additional padding has been added within the left column. 


The final part of the Pandaisia Chocolates home page is the footer, which contains 
three vertical navigation lists and a section element with contact information for 
the store. Once the left margin is clear of previously floated objects, float these four 
elements on the left margin with the widths of the three navigation lists each set to 22% 
of the body width and the section element occupying the remaining 34%. 


To lay out the page footer: 


BD 1. Return to the pe_home.css file in your editor and scroll down to the Footer 
Styles section. 


D 2. Insert the following style rules: 


footer { 
clear: left; 


} 


footer > nav.verticalNavigation { 
float: left; 
width: 22%; 


} 


footer > section#contactInfo { 
£loat: left; 
width: 34%; 


| Beit =HTML 5 and CSS | Tutorial 3 Designing a Page Layout 


Figure 3-23 highlights the layout style rules for the page footer. 


Setting the layout of the page footer 


/* Footer Styles */ 


footer { 
clear: left; 


displays the footer 
once the left margin is 
gear of floated objects 


} 


footer > nav.verticalNavigation { 
float: left; 
width: 22%; 


es the width of the 
verticalNavigation lists 
to 22% and floats 
them on the left 


} 


footer > section#contactinfo { 
float: left; 
width: 34%; 


sets the width of the 
contactlnfo section to 
34% and floats it on 

the left 


BD 3. Save your changes to the style sheet and then reload pc_home.html in your 
browser. Figure 3-24 shows the new layout of the footer. 


Figure 3-24 Page footer layout 


each vertical navigation 
list set at 22% of the 
footer width and 
floated on the left 


© Brent Hofacker/Shutterstock.com; © Jim Bowie/Shutterstock.com; 
© wacomkaShutterstock.com; © Shebeko/Shutterstock.com; 
Source: Facebook; Source: Twitter, Inc. 


width of the contactInfo 
section set at 34% of the 
footer width and floated 
on the left 


Anne asks you to change the background color of the footer to a dark brown to better 
show the text content. 
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To set the footer background color: 
BD 1. Return to the pe_home.css file in your editor and go to the Footer Styles section. 
D2. Insert the following property for the footer selector: 


background-color: rgb(71, 52, 29); 


Figure 3-25 highlights the footer background color style. 


Setting the footer background color 


footer { 
footer back d 
Dg an aes background-color: rgb(71, 52, 29); 
clear: left; 


} 


BD 3. Save your changes to the style sheet and then reload pc_home.html in your 
browser. Note that the background color is not changed. 


Why didn’t the change to the background color take effect? To help you understand 
why, you'll look once again at the nature of floated elements. 


Working with Container Collapse 


Recall that a floated element is taken out of the document flow so that it is no longer 
“oart” of the element that contains it. Literally it is floating free of its container. When 
every element in a container is floated, there is no content left. As far as the browser is 
concerned, the container is empty and thus has no height and no background to color, a 
situation known as container collapse. Figure 3-26 demonstrates container collapse for 
a container that has three floating objects that exceed the boundaries of their container. 


Figure 3-26 Container collapse 


container doesn’t 
enclose floated 
content 


container expanded 
to enclose floated 
content 
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What you usually want in your layout is to have the container expand to surround 
all of its floating content. One way this can occur is if the container is followed by 
another element that is displayed only when the margins are clear of floats. In that 
situation, the container’s height will expand up to that trailing element and in the 
process surround its floating content. 

The problem with the footer in the Pandaisia home page is that there is no trailing 
element—the footer is the last element in the page body. One way to fix that problem 
is to use the after pseudo-element to add a placeholder element after the footer. The 
general style rule is 


container::after { 
clear: both; 
content: ""; 
display: table; 


} 


where container is the selector for the element containing floating objects. The clear 
ene property keeps this placeholder element from being inserted until both margins are 
prevent container collapse, Clear of floats. The element itself is a web table but contains only an empty text string 
search the web using the so that no actual content is written to the web page. That’s okay because the mere 
keywords CSS clearfix. presence of this placeholder element is enough to keep the container from collapsing. 
Add a style rule now to create a placeholder element that keeps the footer from 
collapsing around its floating content. 


To keep the footer from collapsing: 


BD 1. Return to Footer Styles section in the pe_home.css file and, after the style 
rule for the footer element, insert the following rule: 


footer::after { 
clear: both; 
content: "="; 
display: table; 


} 
Figure 3-27 highlights the new rule in the style sheet. 


Figure 3-27 Preventing the footer from collapsing 


gt ’ és 5 


left; 
creates an element 
after the footer 


footer::after { 


clear: both; places the element 
the element content: ""; after both the 


consists of an display: table; margins are clear 
empty web table 


D 2. Save your changes to the style sheet and then reload pc_home.html in 
your browser. Figure 3-28 shows the completed layout of the Pandaisia 
Chocolates home page. 
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Figure 3-28 Final layout of the Pandaisia Chocolates home page 


Pandaisia Chocolates has been 
creating gourmet chocolates and 
sweets for happy customers since 
1993. Our hand-dipped truffles, 
savory chocolates, and mouth 
watering toffecs are made from the 
finest organic cacac. We use only 
natural ingredients with wildflower 
honey replacing corn syrup and 
cream that comes Tresh from local 
dairy farms. Chocolate is an art; 
come tour our gallery. 


footer has expanded 
to contain all floated 
content 


© Brenda Carson/Shutterstock.com; © Brent Hofacker/Shutterstock.com; © Jim Bowie/Shutterstock.com; 
© wacomkaShutterstock.com; © Shebeko/Shutterstock.com; Source: Facebook; Source: Twitter, Inc. 


Note that the footer now has a dark brown background because it has 
expanded in height to contain all of its floated content. 


BD 3. Close any of the documents you opened for this session. 


Keeping a Container from Collapsing 


¢ To prevent a container from collapsing around its floating content, add the following 
style rule to the container 


container::after { 
Guleenes lefeyelalp 


REFERENCE 


Coimecines Wile 
display: table; 


} 


where container is the selector for the element containing the floating content. 
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% 


~. Problem Solving: The Virtue of Being Negative 


PROSKILLS 


It's common to think of layout in terms of placing content, but good layout also must 
be concerned with placing emptiness. In art and page design, this is known as working 
with positive and negative space. Positive space is the part of the page occupied by 
text, graphics, borders, icons, and other page elements. Negative space, or white 
space, is the unoccupied area and provides balance and contrast to elements contained 
in positive space. 

A page that is packed with content leaves the eye with no place to rest; which 
also means that the eye has no place to focus and maybe even no clear indication 
about where to start reading. Negative space is used to direct users to resting stops 
before moving on to the next piece of page content. This can be done by providing 
a generous margin between page elements and by increasing the padding within an 
element. Even increasing the spacing between letters within an article heading can 
alleviate eye strain and make the text easier to read. 

White space also has an emotional aspect. In the early days of print advertising, 
white space was seen as wasted space, and thus, smaller magazines and direct mail 
advertisements would tend to crowd content together in order to reduce waste. By 
contrast, upscale magazines and papers could distinguish themselves from those 
publications with an excess of empty space. This difference carries over to the web, 
where a page with less content and more white space often feels more classy and 
polished, while a page crammed with a lot of content feels more commercial. Both can 
be effective; you should decide which approach to use based on your customer profile. 


You’ve completed your work on the Pandaisia Chocolates home page. In the next 


session, you'll work on page layout using the technique of grids. 


REVIEW 


Session 3.1 Quick Check 


1. To display an element as a block-level use: 
a. display: block-level; 
b. display: block; 
c. display: inline; 
d. display: display-block; 
2. What are three types of layouts? 
a. inline, fluid, static 
b. fixed, floating, static 
c. fixed, fluid, elastic 
d. inline, block, scrolling 
3. Provide a style rule to set the maximum width of an element to 960 pixels. 
a. maximum-width: 960px; 
b. maxw: 960px; 
c. width: 960px; 
d. max-width: 960px; 
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. Provide a style rule to horizontally center a block element within its container 

with a top/bottom margin of 20 pixels. 

a. margin: 20px center; 

b. margin: center 20px; 

Cc. margin: auto 20px; 

d. margin: 20px auto; 

. Provide a style rule to place an object on the right margin of its container. 

a. margin: right; 

b. text-align: right; 

c. float: right; 

d. padding: right; 

. Provide a style rule to display an object only when all floating elements have 

cleared. 

a. clear: float; 

b. clear: floats; 

c. clear: both; 

d. clear: all; 

. Your layout has four floated elements in a row but unfortunately the last 

element has wrapped to a new line. What is the source of the layout mistake? 

a. The widths of the floated elements exceed the available width of their 
container. 

b. You cannot float more than one object within a row. 

c. You have to clear the first three floating object to make room for the fourth. 

d. You have to clear the fourth floating object to make room for the first three. 

. Provide a style rule to change the width property for the header element so 

that it measures the total width of the header content, padding, and border 

spaces. 

a. box-sizing: border-box; 

b. box-sizing: content-box; 

C. box-sizing: all; 

d. box-sizing: complete; 

. What causes container collapse? 

a. The width of the child elements exceeds the width of the container. 

b. The width of the container element is fixed at 0 pixels. 

c. The height of the container element is fixed at 0 pixels. 

d. All child elements are floating so that they are free of the container, leaving 
the container with no content. 
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Session 3.2 Visual Overview: 


The grid-template- 


columns property To create a grid container A fractional unit, 
establishes the size and set the display property indicated by the unit 
number of grid columns to grid. abbreviation fr, expands or 


contracts to fill available 
space; these fractional units 
keep the columns widths in 
a 2:1 proportion. 


body { 
display: grid; 


grid-tempLate-columns: 2fr lfr3 Saas 
grid-template-areas: "header header" 
The grid-template- "Intro faq" 
areas property defines "articles faq " 
the areas in the grid oA . 
footer footer"; 
grid-column-gap: 15px; 


} The grid-column-gap 
property sets the interior 
space between grid 


Use the grid-row body > header { columns. 
and ais . eri d-row: iy 
properties to place items (es 5 P 
at and across specified B! id-column: 1/-1; 
grid rows and columns. } 
body > article {grid-area: intro;} 
Use the grid-area body > aside {grid-area: faq; } 
property to place items z : bis ‘ ‘ 
within grid areas. body > section {grid-area: articles;} 
body > footer {grid-area: footer;} 
/* Grid Styles for Nested Grid */ 


section { 
display: grid; 
grid-template-columns: repeat(2, ifr); 


} 


section > hi { 
grid-area: 1/1/2/3; 
} 
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CSS Grid Layouts 


Page header covers the 
grid from column gridline 
| 1 to -1 (the last gridline) 


~ Columns 

laid out ina 

proportion 
of 2:1 


aside element 
- placed in the 
FAQ grid area 


© Twin Design/Shutterstock.com 


footer element 
placed in the 
footer grid area 


Beit” §=HTML 5 and CSS | Tutorial 3 Designing a Page Layout 


Introducing Grid Layouts 


In the previous session, you used the float property to lay out a page in sections 
that floated alongside each other like columns. In this session, you'll explore how to 
generalize this technique by creating a page layout based on a grid. 


Overview of Grid-Based Layouts 


Grids are a classic layout technique that has been used in publishing for hundreds of 
years and, like many other publishing techniques, can be applied to web design. In a 
grid layout, the page is comprised of a system of intersecting rows and columns that 
form a grid. The rows are based on the page content. A long page with several articles 
might span several rows, or it could be a home page with introductory content that 
fits within a single row. The number of columns is based on the number that provides 
the most flexibility in laying out the page content. Many grid systems are based on 

12 columns because 12 is evenly divisible by 2, 3, 4, and 6, but other sizes are also 
used. Figure 3-29 shows a 12-column grid layout. 


grid columns 


je 2 el SS lS a Sala SS a lS SS eS a 


The page designer then arranges the page elements within the chosen grid. Figure 3-30 
shows one possible layout comprised of a main header element (the tan area), three 
major sections (the lavender, light green, and blue areas), as well as a navigation bar 
and a footer (the dark green areas). Some sections (like the dark green and blue areas) 
are further divided into small subsections. 
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Figure 3-30 Layout based on a grid 


It should be stressed that the grid is not part of the web page content. Instead, it’s a 
systematic approach to visualizing how to best fit content onto the page. Working from 
a grid has several aesthetic and practical advantages, including 


¢ Grids add order to the presentation of page content, adding visual rhythm, which is 
pleasing to the eye. 

e A consistent logical design gives readers the confidence to find the information they seek. 

¢ New content can be easily placed within a grid in a way that is consistent with 
previously entered information. 

¢ A well designed grid is more easily accessible for users with disabilities and special needs. 

¢ Grids speed up the development process by establishing a systematic framework for 
the page layout. 


There are two basic types of grid layouts: fixed grids and fluid grids. 


Fixed and Fluid Grids 


In a fixed grid, the widths of the columns and margins are specified in pixels, where 
every column has a fixed position. Many fixed grid layouts are based on a page width 
of 960 pixels because most desktop screen widths are at 1024 pixels (or higher) and a 
960-pixel width leaves room for browser scrollbars and other features. The 960-pixel 
width is also easily divisible into halves, thirds, quarters, and so forth, making it easier 
to create evenly spaced columns. 

The problem of course with a fixed grid layout is that it does not account for other 
screen sizes and thus, a fluid grid, in which column widths are expressed in percentages 
rather than pixels, is often used to provide more support across different devices. In the 
examples to follow, you'll base your layouts on a fluid grid system. 

Grids are often used with responsive design in which one grid layout is used with 
mobile devices, another grid layout is used with tablets, and yet another layout is used 
with desktop computers. A layout for a mobile device is typically based on a 1-column 
grid, tablet layouts are based on grids of 4 to 12 columns, and desktop layouts are often 
based on layouts with 12 or more columns. 
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CSS Frameworks 


Designing your own grids can be time-consuming. To simplify the process, you can 
choose from the many CSS frameworks available on the web. A framework is a software 
package that provides a library of tools to design your website, including style sheets for 
grid layouts and built-in scripts to provide support for a variety of browsers and devices. 
Most frameworks include support for responsive design so that you can easily scale your 
website for devices ranging from mobile phones to desktop computers. 

Some popular CSS frameworks include 


¢ Bootstrap (getbootstrap.com) 

¢ Neat (neat.bourbon.io) 

¢ Unsemantic (unsemantic.com) 

e Profound Grid (www.profoundgrid.com) 

¢ HTML 5 Boilerplate (htm/5boilerplate.com) 
¢ Skeleton (getskeleton.com) 


While a framework does a lot of the work in building the grid, you still need to 
understand how to interact with the underlying code, including the style sheets used 
to create a grid layout. In place of third-party frameworks, you can design your own 
grids using grid styles from CSS. Achieving Candidate Recommendation status by the 
W3C in December, 2017, the CSS grid styles are now widely supported by all major 
browsers on almost every device. 


Introducing CSS Grids 


The CSS grid model is a set of CSS design styles used to create grid-based layouts. 
Before discussing the CSS styles, we should first explore the key terms and concepts 
associated with building a CSS grid. Each CSS grid is laid out in a set of row and 
column gridlines as shown in Figure 3-31. 


Figure 3-31 Row and column gridlines 


row grid line 


column grid line 


To reference positions within a grid, the CSS grid model numbers the gridlines in the 
horizontal and vertical directions, starting from the top-left corner of the grid with the 
row gridlines and then moving left to right with the column gridlines along the bottom. 
Both gridlines start with a value of “1” and increase in value down and across the grid 
(see Figure 3-32.) 
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Figure 3-32 Numbering gridlines 


1 


You can reference gridlines in the reverse order starting from the bottom-right corner 
with the first row and column gridlines in those directions are given a value of “—1” as 
shown in Figure 3-33. 


Figure 3-33 Numbering gridlines from right to left 


4 


5 -4 “g “2 -1 


The advantage of using both positive and negative gridline numbers is that you can 
always reference both the first gridline (1) and the last gridline (—1) no matter the size 
of the grid. This will become important later when placing items at specific locations 
within the grid or sizing those items to cover multiple rows and columns. 


For countries and regions 
that read material right- 
to-left rather than left- 


to-right, the grid The cells that are created from the intersection of the horizontal and vertical 
numbering system is gridlines will contain the elements from the web page. An element can be contained 
Pies so ictices within a single cell or it can span several cells within a grid area. Figure 3-34 shows 


di der. z is : 
sie eee: a grid area consisting of three rows and two columns. Note that grid areas must be 


rectangular; you cannot have an L-shaped grid area. 


grid area covering 3 
rows and 2 columns of 


the grid 


Rows and columns are also called tracks or grid tracks. 
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You will create a grid for a web page describing the Pandaisia Chocolates company. 
Anne has already written and marked up the content of the page. Open Anne’s file now. 


To open the file containing information about the company: 


D 1. Use your editor to open the pe_about_txt.html file from the html03 » tutorial 
folder. Enter your name and the date in the comment section and save the 
file as pe_about.html. 

BD 2. Take some time to examine the contents of the page. 

BD 3. Open the pc_about.html file in your browser. See Figure 3-35. 


Figure 3-35 Initial About Pandaisia Chocolates page 


There is currently no layout for the page contents and all the structural elements 
appear stacked within a single column. Anne sketches her idea for a different page 


layout, shown in Figure 3-36. 
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Figure 3-36 Proposed grid layout for the About Pandaisia Chocolates page 
About Pandaisia Chocolates 


Our Company FAQ 


2 x 2 grid nested 
within the first 
column of the 


About Chocolate second row 
oo a 
Enjoying Chocolate 1 Healthy Chocolate 
I 
1 
Pe ay ee aS ai ah Ew qocccc ccc ccc 
Single-Origin and Blends 1 Ethical Produce 


third row Pandaisia Chocolates © 2021 All Rights Reserved 


second column 


first column 


Anne’s layout consists two grids: one nested within the other. The outer grid consists 
of three rows and two columns. The first and third rows contain the page header and 
page footer, with the header and footer both spanning an entire row. The second row 
displays information about the company in the first column and a list of frequently 
asked questions is displayed in the second column. Within the second row is a nested 
grid of two rows and two columns containing four articles about Pandaisia Chocolates, 
its operations, and products. You will use the CSS grid model to create this grid layout. 


Creating a CSS Grid 


To create a CSS grid, you must first identify a page element as the grid container using 
the following display property: 


display: grid; 


Figure 3-37 shows a simple web page containing a div element with the id "outer" 
that contains six nested div elements. The outer element is displayed as a grid and each 
of the six child elements become items within that grid. The grid is limited to those six 
div elements. Any elements nested within those div elements are not part of the grid 
structure. 
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Web Page 
HTML Content 
<body 
div id="outer" 
div id="item1">1</di 
div id="item2">2</dis 
div id="item3">3</div 
<di id="item4">4</div 
<div id="item5">5</di\ 


body> 


div 


div> 


id="item6">6</div> 


CSS Styles 


} 


div#outer { 
display: grid; 


outer element is 
marked as a grid 


each child element 
is part of the grid 


The six child div elements are now grid items, so they are no longer considered 
block-level elements because they are fixed within the grid structure. You couldn't, for 
example, float any of those elements because floating them would remove them from 
the grid and the CSS grid model doesn’t allow that. The entire grid itself is considered a 
block-level element and thus could be floated or resized within the web page just like 
any other block-level element. 

Grids can also be created as inline elements using the style: 


display: inline-grid; 


which creates the grid inline with other elements in the web page. In this session 
we will only examine grids as block-level elements, but be aware than any of the 
techniques introduced for setting up a grid can be applied to both the block-level and 
inline versions. 

Use the display property now to define outer and inner grids described in 
Figure 3-36. You will place all your grid styles within a separate CSS file. 


To create the grid style sheet: 

BD 1. Use your editor to open the pe_grids_txt.css file from the html03 > tutorial 
folder. Enter your name and the date in the comment section and save the 
file as pe_grids.css. 

BD 2. Within the Grid Styles for Page Body section, insert the following style rule to 
define a grid for the entire page body: 
body { 

display: grid; 


} 
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BD 3. Within the Grid Styles for Nested Grid section, insert the following style rule 
to turn the section element into a grid: 


section { 
display: grid; 


} 
Figure 3-38 highlights the newly added code. 


HTML 215 


Figure 3-38 Creating two grids for the web page 


The number of columns 
in the grid is determined 
by the number of entries 
in the grid-template- 
columns property. 


/* Grid Styles for Page Body 


body { ee ae sue 
At eran a i of the body element 
} Sie pE APS BK, within a grid 


Grid Styles for Nested Grid 


displays the children 
of the section 
element within a 
grid 


section { 
display: grid; 
} 


BD 4. Save your changes to the file and then return to the pe_about.html file in 
your editor. 


BD 5. Within the head section, add the following link element to link the web 
page to the pc_grids.css style sheet. 


<link href="pce_grids.css" rel="stylesheet" /> 


BD 6. Save your changes to the file. 


Having set up the grids you will next use CSS to define the rows and columns of the 
grid structure. 


Working with Grid Rows and Columns 


To define the number and size of grid columns, use the following grid-template- 
columns style: 


grid-template-columns: widthi1 width2 ..; 


where width1, width2, etc. is a space-separated list that defines the width of the 
columns or tracks within the grid. For example, the following style rule creates two grid 
columns: the first 250 pixels in width and the second with a width of 100 pixels. 


grid-template-columns: 250px 100px; 
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Column widths can be expressed using any CSS unit measures such as pixels, em 
units, and percentages. You can also use the keyword auto to allow the column width 
to be automatically set by the browser. The following style creates a three-column grid 
with the width of the first column fixed at 100 pixels, the third column at 50 pixels, 
and the center column occupying whatever space remains. 


grid-template-columns: 100px auto 50px; 


You might use such a layout in a page in which the first and third columns contain 
navigation lists that are fixed in size while the middle column contains an article that 
should expand to fill the remaining space. 

Figure 3-39 shows a two-column grid with fixed widths of 250 pixels and 100 
pixels. Notice that the number of rows is not defined, so that the browser automatically 
adds rows as needed to contain all page elements within the grid container. Because 
there are six grid items, this grid is arranged in a layout of three rows and two columns. 
If there were eight child elements the grid would be four rows by two columns, and 
so forth. 


Figure 3-39 Setting the grid columns 


columns are 
explicitly defined 
in the style sheet 


div#outer { 
display: grid; 
grid-template-columns: 250px 100px; 


defines a two-column 
grid layout using 
absolute widths 


rows are implicitly 


created from the 
grid content 


Figure 3-39 highlights an important contrast between explicit grids and implicit grids. 
An explicit grid completely defines the number and size of the grid rows and columns. 
An implicit grid contains rows and/or columns that are generated by the browser as 
it populates the grid with items from the grid container. In most grid layouts you will 
explicitly define the columns and let the browser fill out the grid rows drawn from the 
web page content. 

To explicitly define the number of rows and their height, use the following 
grid-template-rows property: 


grid-template-rows: height1 height2 ...; 


where height1, height2, etc. define the heights of the grid rows. Figured 3-40 shows 
an example of an explicit grid in which both the columns and rows are defined in the 
CSS style sheet. 
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Figure 3-40 Explicitly defining grid columns and rows 


div#outer { 250px 100px 
play: grid; 


250px 100px; 
5O@px 100px 15@px; 50px 
——— 


we 


explicitly defines 


both the rows and 100px 


columns of the grid 


150px 


In an implicit grid, the row heights are determined by the page element. You can also 
set the row heights in an implicit grid using the following grid-auto-rows property: 


grid-auto-rows: height1 height2 ...; 


where height1, height2, etc. are the heights of the rows with the sequence repeating 


os eeees for each new set of rows. For example, the style: 


item is greater than can 


grid-auto-rows: 100px; 
be displayed within 


the allotted height, the sets the height of each row to 100 pixels, while the style 
browser will automatically 

increase the row height to grid-auto-rows: 100px 200px; 

match. 


sets the height of the first row in the implicit grid to 100 pixels, the height of the second 
row to 200 pixels, and then repeats those heights for each subsequent set of two rows 
until the grid is filled. 


Track Sizes with Fractional Units 


A grid layout will often need to adapt to devices of various screen widths and sizes. 
One way of accomplishing this is with flexible units. A fr (fractional) unit, indicated 
by the unit abbreviation fr, creates grid tracks that expand or contract in size to fill 
available space while retaining their relative proportions to one another. The following 
is an example of a grid in which the track sizes of the columns and rows is set using 
fractional units: 


grid-template-columns: 4fr lfr; 
grid-template-rows: 4fr 2fr 1lfr; 


As the size of the display window changes, the column widths maintain their 
proportions so that the first column is always four times wider than the second column 
and the row heights maintain their proportion of 4:2:1. See Figure 3-41. 
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Using flexible units in a grid 


div#outer { columns maintain a 
display: grid; proportion of 4:1 


grid-template-columns: 4fr 1fr; y 
1 
3 
5 
1 
3 
s 


grid-template-rows: 4fr 2fr 1fr; 


fr unit sets flexible 
track sizes 


rows maintain a 
proportion of 
4:2:1 


Fractional units are often combined with absolute units to create grid layouts that 
are both fixed and flexible. The following style rule generates a grid in which the width 
of the first column is set to 250 pixels with the remaining space allotted to the other 
two columns in a proportion of 2 to 1. 


grid-template-columns: 250px 2fr lfr 


Such a layout might be used in a web page in which the first column contains a 
navigation list whose width is fixed, the second column contains an article of primary 
importance, and the third column contains a sidebar of lesser importance. As the 
size of the display window changes, the width of the second and third columns 
automatically change, filling the screen while maintaining their 2:1 ratio. 


Repeating Columns and Rows 


Some grid layouts involve 12 or 16 columns or more. With so many columns it’s 
difficult to specify the size of each column. You can simplify the layout style by using 
the following repeat () function 


repeat (repeat, tracks) 


where repeat is the number of repetitions of the tracks specified in tracks. For 
example, the following expression creates a layout consisting of one fixed column 250 
pixels in width followed by four sets of two columns in which the first column in each 
set is twice the width of the second column for a total of nine grid columns. 


grid-template-columns: 250px repeat (4, 2fr 1lfr); 


In place of a repeat value, you can use the keyword auto-fill to fill up the grid 
with as many columns (or rows) that will fit within the grid container. The following 
style uses the auto-£i11 keyword to fill the grid with as many 100 pixel-wide 
columns that will fit within the container: 


grid-template-columns: 250px repeat (auto-fill, 100px); 


Any grid item that cannot fit within the grid container will be automatically wrapped 
to a new row. This type of layout could be used with an image gallery in which each 
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row contains as many 100 pixel-wide images that can fit within the display window, 
arranged in columns. 

Finally, you can switch between fixed and flexible track sizes using the following 
minmax() function 


minmax(min, max) 


where min is the minimum track size for a row and column and max is the maximum. 
Used in the following style rule, the grid will contain as many columns of equal width 
that can fit within a grid container down to a minimum width of 100 pixels: 


grid-template-columns: repeat (auto-fill, minmax(100px, lfr)); 


Figure 3-42 shows how such a layout would be applied to grid containers of different 
widths. 


Figure 3-42 Using the minmax function in a grid 


divéouter 


g j > 


repeat (auto-fill, minmax(10@px, 


each row is filled 
with as many 
equal-width items 
as will fit within 
the grid, down to 
a minimum width 
of 100 pixels 


As the grid container decreases in size, grid items are automatically wrapped to a 
new row. Under each layout, the columns are given equal widths down to a minimum 
width value of 100 pixels. 


Applying a Grid Layout 


Now that you've seen how to set the size of rows and columns within a grid, you will 
apply your knowledge to the About Pandaisia web page. From Anne’s proposed layout 
shown earlier in Figure 3-36, you've learned that the two columns in the outer grid 
should be displayed in a proportion of 2:1, while the four articles about chocolate in 
the nested grid should be displayed with columns of equal width. You will define the 
column widths for both the outer and nested grids using fractional units. You won't, 
however, explicitly define the number and height of the grid rows, leaving the browser 
to implicitly lay out that content. 


To define the grid columns: 
BD 1. Return to the pe_grids.css file in your editor. 
D 2. Within the style rule for the body element, add the style: 


grid-template-columns: 2fr lfr; 
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D 3. Within the style rule for the section element, add: 
grid-template-columns: repeat(2, lfr); 


Figure 3-43 highlights the newly added code. 


Creating two grids for the web page 


bod 
7! t aye creates two grid 
a sia Se ee 5 columns with the first 
rid-template-columns: 2fr ltr3 i i 
column twice the width 
of the second 
section { 


lisplay: fs F 

o, - " . creates two grid 
7riItd-temptlate-columns: pe 2 f; 4 = 
haieiiiiaaais - repest(a,, 1frys columns of equal width 


4. Save your changes to the file and then reload pc_about.html in your browser. 
Figure 3-44 shows part of the layout of the page under the current grid structure. 


Figure 3-44 Web page with the column layout 


first column is twice the - 
width of the second 
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The page layout does not resemble the plan that Anne outlined in Figure 3-36 
because we have not specified where each item should be placed within the grid. That 
will be the final step in designing the grid layout. Before doing that however, it would 
be helpful to view the page with gridlines superimposed on the web page. We can do 
that with outline styles. 


Outlining a Grid 


Outlines are simply lines drawn around an element, enclosing the element content, 
padding, and border spaces. Unlike borders, which you’ll study in the next tutorial, an 
outline doesn’t add anything to the width or height of the object, it only indicates the 
extent of the element on the rendered page. 

The width of the line used in the outline is defined by the following out1line-width 


property 
outline-width: value; 


where value is expressed in one of the CSS units of length, or with the keywords 
thin, medium, or thick. The line color is set using the out line-color property 


outline-color: color; 


where color is a CSS color name or value. Finally, the design of the line can be set 
using the following out line-style property 


outline-style: style; 


where style is none (to display no outline), solid (for a single line), double, 
dotted, dashed, groove, inset, ridge, or outset. All the outline properties can be 
combined into the following outline shorthand property 


outline: width style color; 


where width, style, and color are the values for the line’s width, design, and 
color. For example, the following style rule uses the wildcard selector along with the 
outline shorthand property to draw a 1 pixel dotted green line around every element on 
the web page: 


o4 


outline: 1px dotted green; 
} 


Note that there are no separate outline styles for the left, right, top, or bottom edge 


of the object. The outline always surrounds an entire element. 
Outlines can also be 


applied to inline elements 
such as inline images, 

citations, quotations, and 
italicized text. Adding an Outline to an Element 


¢ To add an outline around an element, use the property 
outline: width style color; 


where width, style, and color are the outline width, outline design, and outline 
color respectively. These attributes can be listed in any order. 


REFERENCE 


Use the outline property now to add an outline to each item in both the outer 
and inner grids. 
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To define the grid columns: 
1. Return to the pc_grids.css file in your editor. 


2. At the bottom of the style sheet, add the following style rule to place a red 
7 dashed outline around every child of the body element: 
ost browsers include 
developer tools for viewing body > * { 
the gridlines from a CSS 
grid. See your browser 
documentation for specific } 
instructions. 


outline: 2px dashed red; 


3. Add the following style rule to place a blue dashed outline around every 
child of the section element: 


section > * { 
outline: 2px dashed blue; 


} 
Figure 3-45 highlights the code for the style rules. 


Figure 3-45 Adding outlines to grid items 


section { 
display: grid; 
grid-template-columns: repeat(2, 1fr); 


} 


body > * { 
outline: 2px dashed red; 


[ee 


section =» * { 
outline: 2px dashed blue; 


} 


4. Save your changes to the file and then reload pc_about.html in your browser. 
Figure 3-46 shows the outlines around both the outer and inner grids. 
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Adding an outline makes it clear how each item is placed within the grid. Next you 
will change the location and sizes of the grid items to match Anne’s proposed layout. 


Placing Items within a Grid 


By default, grid items are laid out in document order going from left to right and up to 
down, with each item placed within a single cell. Thus, the page header in Figure 3-46, 
being the first item in the grid, appears in the first row and column. The next item, an 
article about the company, occupies the cell in the second column of the first row. 
Subsequent items are placed in cells in the next rows filling the grid until the last item 
is reached, which in this case is the page footer. In many layouts however, you might 
want to move items around or a have a single item occupy multiple rows and columns. 
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REFERENCE 


Defining Grids with CSS 


¢ To assign a CSS grid to an element, use the property 
display: grid; 
¢ To define the number of rows and columns within the grid, use the properties 


grid-template-rows: heighti height2 ...; 
grid-template-columns: widthi width2 ...; 


where height1, height 2, width1, width2, etc. define the row heights or column 
widths. 

¢ To place an element within a specific intersection of grid rows and columns, use the 
properties 


grid-row-start: integer; 
grid-row-end: integer; 
grid-column-start: integer; 
grid-column-end: integer; 


where integer defines the starting and ending row or column that contains the 
content. 
¢ To more compactly set the location of the element within the grid, use the properties 


grid-row: start/end; 
grid-column: start/end; 


where start and end are the starting and ending coordinates of the row and columns 
containing the element. 


Placing Items by Row and Column 


To move a grid item to a specific location within the grid, use the following grid-row 
and grid-column properties: 


grid-row: row; 
grid-column: column; 


where row is the row number and column is the column number. Thus, to place the 
article element in a grid cell located in the first row and second column of the grid, 
apply the following style rule: 


article { 
grid-row: 1; 
grid-column: 2; 


} 


To extend a grid item so that it covers multiple rows or multiple columns, include the 
starting and ending gridline in the style property as follows: 


grid-row: start/end; 
grid-column: start/end; 


where start is the starting gridline and end is the ending gridline. Figure 3-47 shows 
a page layout in which grid items 6, 8, and 9 have been moved and resized using 

the grid-row and grid-column properties. For example, item 6 is moved to the first 
row and second column of the grid while items 8 and 9 have been resized to cover 
multiple rows and/or columns. The other items in the grid are placed in their default 
locations and sized to fit within a single grid cell. 
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Figure 3-47 Placing items within a grid layout 


div#items { 
grid-row: 1; 
grid-column: 2; 


div#items { 
grid-row: 2/4; 
grid-column: 4; 


div#items { 
grid-row: 3/5; 
grid-column: 1/3; 
} 


Starting and ending gridlines can also be expressed in the following four properties: 


grid-column-start: integer; 
grid-column-end: integer; 
grid-row-start: integer; 
grid-row-end: integer; 


so that the style rule grid-column: 2/5 is equivalent to: 


grid-column-start: 2; 
grid-column-end: 5; 


Which approach you use is a matter of personal preference. 

You can also use negative gridline numbers (shown earlier in Figure 3-33) to extend 
an item from the first gridline to the last. Recall that since the last column or row 
gridline has a value of -1, the expression 


grid-column: 1/-1; 


would extend the grid item across the entire row from the first gridline to the last. 
Similarly, the expression 


grid-row: 1/-1; 
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would create a grid item that extends across an entire column. Note that this technique 
only works with explicit grids because in an implicit grid there is no defined last 
column or row. 


INSIGHT 


Naming Gridlines 


Gridline numbers can be difficult and cumbersome to work with, so the CSS grid 
model also supports gridline names, which are descriptive names for row and 
column gridlines. Gridline names are created by adding a name enclosed within 
square brackets into the grid-template-columns or grid-template-rows style. 
For example, the following style creates a grid with three columns and four column 
gridlines named row-start, main-start, main-end, and row-end. 


grid-template-columns: [row-start] 50px [main-start] 250px 
[main-end] 100px [row-end] ; 


To extend a grid item across the entire row, you could apply the style: 
grid-column: 1/4; 

or 
grid-column: row-start/row-end; 


An article could be placed within the center grid column with the style: 


grid-column: main-start/main-end; 


Gridline names can make your CSS code easier to interpret and manage and can be 
more easily updated if you insert additional rows or columns within your grid layout. 


Using the span Keyword 


Another way of setting the size of a grid cell is with the span keyword. The general 
syntax is: 


grid-row: span value; 
grid-column: span value; 


where value is the number of rows or columns covered by the item. The following 
style rule extends the article element across 2 rows and 3 columns of the grid. 


article { 
grid-row: span 2; 
grid-column: span 3; 


} 


To specify both the location and the size of the item, include the starting gridline 
in the style rule. The following style rule places the article element in the first row 
and fourth column of the grid while spanning two rows and three columns from that 
location. 


article { 
grid-row: 1/span 2; 
grid-column: 4/span 3; 


} 


In Anne’s proposed layout, the page header should occupy a single row, extending 
from the first column to the last. Use the grid-column style rule now to display the 
body header across the first row of the grid. 
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To place the body header across the first row: 
BD 1. Return to the pe_grids.ess file in your editor. 


D 2. Directly below the style rule for the body element, insert the following style 
rule as shown in Figure 3-48. 


body > header { 
grid-row: 1; 
grid-column: 1/-1; 


} 


Figure 3-48 Spanning the body header across the grid row 
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body { 
display: grid; 
grid-template-columns:]2fr 1fr; 


} 


body header 


body > header { 
grid-row: 1; 
grid-column: 1/-1; 
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BD 3. Save your changes to the file and reload pc_about.html in your browser. 
The body header extends across the first row of the grid (see Figure 3-49.) 


Figure 3-49 Body header in the first row 


body header 
occupies the 
first row 


Gridlines are a quick and effective method of placing and sizing grid items, but they 
can be confusing when applied to a grid of several rows and columns. An easier and 
more intuitive approach is to use grid areas. 
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Placing Grid Items by Area 


In the grid areas approach to layout you identify sections of the grid with item names, 
creating a textual representation of the layout. Figure 3-50 shows a grid of four 

rows and three columns in which several items span multiple rows and columns, 
represented both visually as it would appear on the web page and textually. 


Figure 3-50 Mapping out grid areas 


header header header 

sidel main nav 

side2 main nav 

footer footer footer 
visual representation textual representation 


To create a textual representation in a style sheet, use the following 
grid-template-areas property: 


grid-template-areas: "rowl" 
"row2" 


sey 


where row1, row2, etc. are text strings containing the names of the areas for each row. 
Thus, to create the grid layout shown in Figure 3-50, you would enter the style: 


grid-template-areas: "header header header" 
"sidel main nav" 
"Sside2 main nav" 
"footer footer footer"; 


You will add a grid-template-areas property to the style sheet, representing the 
layout Anne proposed in Figure 3-36. 


To place the body header across the first row: 


BD 1. Return to the pe_grids.ess file in your editor. 


Dd 2. 


See Figure 3-51. 
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Figure 3-51 Defining areas for the outer grid 


header spans 2 
columns 


body { 
display: grid; 
grid-template-columns: 2fr ifr; 
grid-template-areas: "header header" 


"intro faq" faq spans 2 
"articles faq" Low? 
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To assign elements to grid areas, use the following grid-area property: 


intro and articles 
occupy single grid cells 


grid-area: area; 


where area is the name of an area defined in the grid-template-areas property. 
Use the grid-area property now to assign elements from the web page to areas within 
the grid. 


To assign the page elements to grid areas: 


BD 1. Below the body > header style rule, add the following style to assign the 
article element to the intro grid area. 


body > article {grid-area: intro; } 

D 2. Place the aside element in the faq grid area with the style: 
body > aside {grid-area: faq;} 

BD 3. Place the section element in the articles grid area with the style: 
body > section {grid-area: articles; } 

D 4. Place the body footer element in the footer grid area using the style: 
body > footer {grid-area: footer; } 


Figure 3-52 highlights the newly added code. 
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Figure 5-52 Assigning elements to grid areas 
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body > article {grid-area: intro;} 
body > aside {grid-area: faq; 

body > section {grid-area: articles;} 
body > footer {grid-area: footer;} 
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The grid-area property can also be used as a shorthand to place and size grid 
items using gridline numbers. The general syntax is: 


grid-area: row-start/col-start/row-end/col-end; 


where row-start, col-start, row-end, and col-end are the starting and ending 
gridline numbers from the grid’s rows and columns. For example, the following 
expression places the grid item to extend from the first row gridline through the fourth 
and from the third column gridline through the fifth. 


grid-area: 1/3/4/5; 


The only remaining part of the About Pandaisia web page that needs to be placed 
within the layout is the “About Chocolate” h1 heading that appears in the nested grid. 
Anne wants this heading to extend across two columns in the first row of that grid. 
Add a style rule to place the heading now. 


To place the h1 heading: 


D 1. Below the style rule for the section element, add the following rule to place 
the h1 heading: 


section > hi { 
grid-area: 1/1/2/3; 


} 
See Figure 3-53. 


Placing the h1 heading 


section { 
display: grid; 


grid-tempLate-columns: repeat(2, l1fr); 
t 
extends the h1 heading from 
section > hi { the first through second row 


grid-area: 1/1/2/3; gridlines and the first through 
} third column gridlines 
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BD 2. Save your changes to the pc_grids.css file and then reload the pc_about.htm| 
file in your browser. Figure 3-54 shows the complete layout of the page. 


Figure 3-54 About Pandaisia web page 
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. Return to the pc_grids.css file in your text editor. 


3 
4. Remove the two style rules that create the red and blue dashed outlines and 
then save your changes to the file. 


BD 5. Reload the pc_about.html file in your browser and confirm that the grid 
outlines are removed from the rendered page. 
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Compare the appearance of the page content in Figure 3-54 with the schematic 
diagram shown earlier in Figure 3-36 to see how using a grid provided a unified layout 
for the page. As you become more experienced with setting up and applying grids, you 
can move to more intricate and dynamic page layouts. 


Generating Content with Lorem Ipsum 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent 
libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum 
imperdiet. Duis sagittis iosum. Vestibulum lacinia arcu eget nulla. Sed dignissim 
lacinia nunc. 

That previous paragraph is an example of lorem ipsum, which is nonsensical, 
improper Latin commonly used in page design as filler text. Rather than creating large 
portions of sample text before you can view your layout, lorem ipsum is used to quickly 
generate sentences, lines, and paragraphs that resemble the structure and appearance 
of real text. Lorem ipsum is a particularly useful tool for web designers because they 
can begin working on page design without waiting for their clients to supply all the 
page content. 

Many popular web editors include tools to generate lorem ipsum text strings in 
a wide variety of formats and styles. There are also lorem ipsum generators freely 
available on the web that supplement the lorem ipsum text with HTML markup tags. 


INSIGHT 


Defining the Grid Gap 


Another part of grid layout is defining the space between items in a grid. So far, all our 
layouts have assumed no spacing, but many layouts include interior spaces to allow 
each item “room to breathe.” The gap size is defined using the following grid-gap 
property: 


grid-gap: row column; 


where row is the internal space between grid rows and column is the internal space 
between grid columns. Figure 3-55 shows a grid layout in which the rows are 
separated by a 10-pixel space and the columns by a space of 30 pixels. 


div#outer { 
display: grid; 


grid-template-coLlumns: repeat(3, 150px); 
style to set the row @ ‘ 

grid-gap: 10px 30px; 
and column gap } = 


row gap is 
10 pixels 


column gap is 
30 pixels 
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You can also set the grid gaps for rows and columns using the following properties: 


grid-column-gap: value; 
grid-row-gap: value; 


where value is the size of the gap in one of the CSS units of measure. Anne wants you 
to add a 15-pixel column gap to the About Pandaisia web page but leave the row gap 
at its default value of 0 pixels. 


To set the size of the column gap: 
BD 1. Return to the pe_grids.ess file in your editor. 


D 2. Within the style rule for the body element, add the following property to set 
the column gap size as shown in Figure 3-56. 


grid-column-gap: 15px; 


Figure 3-56 Setting the size of the column gap 


body { 
display: grid; 
grid-template-columns: 2fr 1fr; 
grid-template-areas: "header header" 


"intro faq" 
"articles faq" 
"footer footer"; 


grid-column-gap: 15px; 


interior space between 
columns set to 15 pixels 


BD 3. Save your changes to the file then reload the pc_about.html file in your 
browser. As shown in Figure 3-57, the gap between the first and second 
columns is set to 15 pixels. 


Figure 5-57 Gap between the first and second columns 
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BD 4. You've completed your work on the web page. Close the pc_about.html and 
pc_grids.css files. 
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Note that, unlike margins, the gap size setting is applied only to the interior space 
between the grid items and not to the exterior space between the grid items and the 
edge of the grid container. 


Managing Space within a Grid 


The grid-gap property allows you to define the space between grid items. CSS 
includes other properties to manage the space around the content of each grid cell. 

By default, there is no space between the grid cell borders and the grid cell content. 
However, you can position the content within the grid cell using the align-items and 
justify-items properties. The align-items property sets the vertical placement of 
the content, while the just ify-items property sets the horizontal placement. The 
syntax of both properties is: 


align-items: placement; 
justify-items: placement; 


where placement is: 


® stretch to expand the content between the top/bottom or left/right edges, removing 
any spacing between the content and the cell border (the default) 

® start to position the content with the top or left edge of the cell 

* end to position the content with the bottom or right edge of the cell 

® center to center the content vertically or horizontally within the cell 


Figure 3-58 shows the impact of the align-items and justify-items properties 
seco ei on the placement of the content within each grid cell. By default, there is no spacing 
ainneieansend between the content and the cell border as the content “stretches” to fill the cell 
esas (shown in the grid on the left in the figure). In the grid on the right, the content is 
properties using the placed at the start (top) and horizontal center of the cell and spacing is added between 


demo_grid1.html file from the cell content and the cell borders. 
the html03 » demo folder. 


Applying the align-items and justify-items properties 


Page Header 
aa , 


align-items: stretch; align-items: start; 
justify-items: stretch; justify-items: center; 
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Alignment for a Single Grid Cell 


The align-items and justify-items properties apply to every cell in the grid. To 
align and justify only one cell, apply the align-self and justify-self properties to 
the content within the grid cell. The placement values are the same as for the align- 
items and justify-items properties. For example, the following style rule displays the 
content of the article element in both the horizontal and vertical center of the grid cell. 


article { 
align-self: center; 
justify-self: center; 


} 


Using the align-self and justify-self properties is a quick and easy way 
of centering your content within the web page. Before the introduction of the CSS 
grid model, this was a difficult task involving a lot of CSS hacks, but now it can be 
accomplished by simply placing the item within a grid and centering the content both 
horizontally and vertically. 


Aligning the Grid 


In some layouts involving fixed units, the space taken up by the items within the grid 
will be less than the total space allotted to the grid container itself, creating unused 
space in the container. By default, the grid will be positioned at the top-left corner 
of the container, but you can modify that position using the align-content and 
justify-content properties: 


align-content: placement; 
justify-content: placement; 


where placement is: 


* start to position the grid with the top or left edge of the container (the default) 

¢ end to position the grid with the bottom or right edge of the container 

* center to center the grid vertically or horizontally within the container 

® space-around to insert an even amount of space between each grid item, with 
half-sized spaces on the far ends 

* space-between to insert an even amount of space between each grid item, with no 
space at the far ends 

® space-evenly to insert an even amount of space between each grid item, including 
the far ends 


TRY. IT As with the other grid properties, the align-content property positions the grid 


vertically within the container and the justify-content property moves the grid 
horizontally. Figure 3-59 shows how the interior space within the grid container can be 
snaudifysGonkant managed using the align-content and justify-content properties. In the left grid, 
piobertios Ueingahe the layout is centered both horizontally and vertically within the container. In the right 


demo_grid2.html file from grid, the grid items themselves are positioned evenly within the container. 
the html03 » demo folder. 


You can explore the 


align-content and 
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Figure 3-59 Applying the align-content and justify-content properties 
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align-content: center; align-content: space-evenly; 
justify-content: center; justify-content: space-evenly; 


The align-content and justify-content properties are useful when you want 


to center your entire layout within the web page in both the horizontal and vertical 
directions. 


LY 


Written Communication: Getting to the Point with Layout 


Page layout is one of the most important aspects of web design. A well-constructed 
layout naturally guides a reader's eyes to the most important information in the page. 
You should use the following principles to help your readers quickly get to the point: 


¢ Guide the eye. Usability studies have shown that a reader's eye first lands in the top 
center of the page, then scans to the left, and then to the right and down. Arrange 
your page content so that the most important items are the first items a user sees. 


¢ Avoid clutter. If a graphic or an icon is not conveying information or making the 
content easier to read, remove it. 


e Avoid overcrowding. Focus on a few key items that will be easy for readers to locate 
while scanning the page, and separate these key areas from one another with ample 
white space. Don't be afraid to move a topic to a different page if it makes the 
current page easier to understand. 


¢ Make it manageable. It's easier for the brain to process information when it’s 
presented in smaller chunks. Break up long extended paragraphs into smaller 
paragraphs or bulleted lists. 


e Use a grid. Users find it easier to digest content when it's aligned vertically and 
horizontally. Using a grid helps you line up your elements in a clear and consistent way. 

¢ Cut down on distractions. If you're thinking about using blinking text or a cute 
animated icon, don’t. The novelty of such features wears off very quickly and 
distracts users from the valuable content. 


Always remember that your goal is to convey information to readers, and that 
an important tool in achieving that is to make it as easy as possible for readers to 
find that information. A thoughtfully constructed layout is a great aid to effective 
communication. 


REVIEW 
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In the next session, you'll explore CSS positioning styles that allow you to place page 
elements anywhere within the rendered page. 


Session 3.2 Quick Check 


1. To change an element into a grid container, apply the style: 
a. display: grid-container; 
b. grid-template-columns: auto; 
c. display: grid; 
d. All of the above 
2. A fractional unit (£r) is: 
a. part of a pixel 
b. a fraction of an em unit 
c. a fraction of any fixed unit 
d. used to create elements that expand or contract to fill available space 
3. To explicitly define the columns within a grid, use the CSS property: 
a. grid-template-columns 
b. grid-columns 
c. columns 
d. grid-auto-columns 
4. To implicitly define the height of grid rows, use: 
a. grid-template-rows 
b. grid-rows 
c. rows 
d. grid-auto-rows 
5. To position a grid item in the second row and cover the second and third 
column, apply the style(s): 
a. grid-row: 2; 
grid-column: 2/3; 
b. grid-row: 2; 
grid-column: 2/4; 
Cc. row: 2; 
column: 2/3; 
d. grid-row: 2; 
column-span: 2/2; 
6. To define a grid layout with areas, use the property: 
a. grid-areas 
b. grid-area 
Cc. grid-template-areas 
d. grid-areas-template 
7. To place an element in the grid area named “intro”, apply the style: 
a. grid-area: intro; 
b. grid-template-areas: "intro"; 
Cc. area: intro; 
d. All of the above 
8. To set the space between grid columns to 15 pixels and the space between grid 
rows to 10 pixels, apply the style: 
a. gap: 10px 15px; 
b. grid-gap: 10px 15px; 
C. grid-gap: 15px/10px; 
d. gap: 15px/10px; 
9. To horizontally center the content of a grid cell, apply the style: 
a. align-content: center; 
b. align-self: center; 
Cc. justify-self: center; 
d. justify-content: center; 
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When overflow is set 
to auto, the browser 
automatically displays 
scrollbars for overflowed 
content. 


The overflow 
property determines 
how the browser 
should handle content 
that exceeds the space 
allotted to the element. 


The top property 
provides the top 
coordinate for an 
element using relative, 
absolute, or fixed 
positioning. 


The left property 
provides the left 
coordinate for the 

| Positioned element. 


main { | 
overflow: auto; 
position: relative; 
height: 550px; 
width: 100%; 


div#infol { 
position: absolute; 
top: 20px; 
left: 5%; 


} 


div#info2 { 
position: absolute; 
top: 185px; 
“Left: 42%; 
} 
div#info3 { 
position: absolute; 


top: 135px; 


} 


Relative positioning is 
used to shift an element 
from its default position in 
the document flow. 


Absolute positioning is 
used to place an element 
at specified coordinates 
within a container element. 


(ras and left values can be 
expressed using any of 
the CSS units of measure, 
including pixels and 
percentages, where a 


a " > <P lercentage represents 
left: 75%; 


the percent width or 

height of the containing 
element. 

& 
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Layout with Positioning Styles 


infol is placed 20 pixels info2 is placed 185 pixels 
from the top of the from the top and 42% 
main element and 5% from the left edge of the 
from the left edge. main element. 


Vertical scrollbar 
is automatically 
added to view 
the overflowed 


content. 


75% info3 is placed 135 pixels 


from the top and 75% 
from the left edge. 
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Positioning Objects 


In the last session, you developed a layout in which page objects were strictly aligned 
according to the rows and columns of a grid. While a grid layout gives a page a feeling 
of uniformity and structure, it does limit your freedom to place objects at different 
locations within the page. In this session, you'll explore how to “break out” of the grid 
using the CSS positioning styles. 


The CSS Positioning Styles 


CSS supports several properties to place objects at specific coordinates within the page 
or within their container. To place an element at a specific position within its container, 
you use the following style properties 


position: type; 
top: value; 
right: value; 
bottom: value; 
left: value; 


where type indicates the kind of positioning applied to the element, and the top, right, 
bottom, and left properties indicate the coordinates of the top, right, bottom, and left 
edges of the element, respectively. The coordinates can be expressed in any of the CSS 
measuring units or as a percentage of the container’s width or height. 

CSS supports five kinds of positioning: static (the default), relative, absolute, 
fixed, and inherit. In static positioning, the element is placed where it would have 
fallen naturally within the flow of the document. This is essentially the same as not 
using any CSS positioning at all. Browsers ignore any values specified for the top, 
left, bottom, or right properties under static positioning. 


Relative Positioning 


Relative positioning is used to nudge an element out of its normal position in the 
document flow. Under relative positioning, the top, right, bottom, and left properties 
indicate the extra space that is placed alongside the element as it is shifted into a new 
position. For example, the following style rule adds 250 pixels of space to the top of the 
element and 450 pixels to the left of the element, resulting in the element being shifted 
down and to the right (see Figure 3-60): 
div { 

position: relative; 

top: 250px; 

left: 450px; 
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Figure 3-60 Moving an object using relative positioning 


object shifted 
250 pixels down 


and 450 pixels 
D5Oinixels to the right 
from its default 
Le Re position 


other page elements 450 pixels 
retain their original 


positions 


original layout layout under relative positioning 


Note that the layout of the other page elements are not affected by relative positioning; 
they will still occupy their original positions on the rendered page, just as if the object 
had never been moved at all. 

Relative positioning is sometimes used when the designer wants to “tweak” the page 
layout by slightly moving an object from its default location to a new location that fits 
the overall page design better. If no top, right, bottom, or left values are specified with 
relative positioning, their assumed values are 0 and the element will not be shifted at all. 


Absolute Positioning 


Absolute positioning places an element at specific coordinates within a container 
where the top property indicates the position of the element's top edge, the right 
property sets the position of the right edge, the bottom property sets the bottom edge 
position, and the left property sets the position of the left edge. 

For example, the following style rule places the header element 620 pixels from the 
top edge of its container and 30 pixels from the left edge (see Figure 3-61). 


To place an element at the 
bottom right corner of its header { 

container, use absolute ions 

positioning with the right position: absolute; 
and bottom values set to top: 620px; 
0 pixels. left: 30px; 
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Figure 3-61 Moving an object using absolute positioning 
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other page 
elements move into 
the space previously 
occupied by the 
now absolutely 
positioned object 


top-left corner of 
object placed 
620 pixels down 


620px 


and 30 pixels to 
the right of the 

top-left edge of 
the web page 


Ueeeosss Poeoossoseseesces 


original layout layout under absolute positioning 


To place an object with absolute positioning, you use either the top/left coordinates or 
the bottom/right coordinates, but you don’t use all four coordinates at the same time 
because that would confuse the browser. For example an object cannot be positioned 
along both the left and right edge of its container simultaneously. 

As with floating an element, absolute positioning takes an element out of normal 
document flow with subsequent elements moving into the space previously occupied 
by the element. This can result in an absolutely positioned object overlapping other 
page elements. 

The interpretation of the coordinates of an absolutely positioned object are all 
based on the edges of the element's container. Thus the browser needs to “know” 
where the object's container is before it can absolutely position objects within it. If the 
container has been placed using a position property set to relative or absolute, 
the container’s location is known and the coordinate values are based on the edges 
of the container. For example the following style rules place the article element at 
a coordinate that is 50 pixels from the top edge of the section element and 20 pixels 
from the left edge. 


TRY_IT 


You can explore positioning 
styles using the file demo_ 
positioning.html from the 
html04 » demo folder. 


section { 
position: relative; 

} 

section > article { 
position: absolute; 

top: 

left: 


50px; 
20px; 


} 


Note that you don’t have to define coordinates for the section element as long as 
you've set its position to relative. 

The difficulty starts when the container has not been set using relative or absolute 
positioning. In that case, the browser has no context for placing an object within the 
container using absolute positioning. As a result, the browser must go up a level in 
the hierarchy of page elements, that is, to the container’s container. If that container 
has been placed with absolute or relative positioning, then any object nested within it 
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can be placed with absolute positioning. For example, in the following style rule, the 
position of the article element is measured from the edges of the body element, not 
the section element: 


body {position: absolute; } 
body > section {position: static; } 


body > section > article { 
position: absolute; 
top: 50px; 
left: 20px; 


} 


Proceeding in this fashion the browser will continue to go up the hierarchy of 


Nellie a seewitae elements until it finds a container that has been placed with absolute or relative 


a container are placed positioning or it reaches the root htm1 element. If it reaches the htm1 element, the 
using absolute positioning, coordinates of any absolutely positioned object are measured from the edges of the 
econ ner Weveine browser window itself. Figure 3-62 shows how the placement of the same object can 


ill coll : . : 2 5 
US HEL ESI differ based on which container supplies the context for the top and left values. 


Figure 3-62 Context of the top and left coordinates 


position: relative; 


80px 


because the inner 
container has not been 
placed using relative or 
absolute positioning, the 
context shifts up the 
hierarchy to the outer 
container 


absolute positioning from the absolute positioning from the 
inner container outer container 


Coordinates can be expressed in percentages as well as pixels. Percentages are used 
for flexible layouts in which the object should be positioned in relation to the width 
or height of its container. Thus, the following style rule places the article element 
halfway down and 30% to the right of the top-left corner of its container. 


article { 
position: absolute; 
top: 50%; 
left: 30%; 


| Bet ey =HTML 5 and CSS | Tutorial 3 Designing a Page Layout 


As the container of the article changes in width or height, the article’s position will 
automatically change to match. 


Fixed and Inherited Positioning 


When you scroll through a document in the browser window, the page content scrolls 
along. If you want to fix an object within the browser window so that it doesn’t scroll, you 
can set its position property to fixed. For example, the following style rule keeps the 
footer element at a fixed location, 10 pixels up from the bottom of the browser window: 


footer { 
position: fixed; 
bottom: 10px; 


} 


Note that a fixed object might cover up other page content, so you should use it with 
care in your page design. 

Finally, you can set the position property to inherit so that an element inherits 
the position value of its parent element. 


Positioning Objects with CSS 
¢ To shift an object from its default position, use the properties 


position: relative; 
top: value; 

left: value; 
bottom: value; 


REFERENCE 


right: value; 


where value is the distance in one of the CSS units of measure that the object should 
be shifted from the corresponding edge of its container. 
¢ To place an object at a specified coordinate within its container, use the properties 


position: absolute; 
top: value; 

left: value; 
bottom: value; 
right: value; 


where value is a distance in one of the CSS units of measure or a percentage of the 
container’s width or height. 

¢ To fix an object within the browser window so that it does not scroll with the rest of 
the document content, use the property 


position: fixed; 


Using the Positioning Styles 


Anne wants you to work on the layout for a page that contains an infographic on 
chocolate. She sketched the layout of the infographic page, as shown in Figure 3-63. 
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Figure 3-63 Proposed layout of the chocolate infographic 


{ 
arse Ny) W/ 
The first box of Valentine's 
Day chocolates was created 
by British chocolatier 
Richard Cadbury in 1868. The lvory Coast accounts 


for 40% of the worldwide 
cocoa production. 


A single cocoa tree produces 
about 800 bars of milk 
chocolate or 400 bars of dark 


chocolate every year. 
The word chocolate comes 


from the Azetc word, xocalatl, 
which means bitter water. 


2 
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Top Chocolate-Loving Nations (per capita) 


Favorite Box Chocolates 


Dark chocolate is one of the 
most potent sources of 
antioxidants, having up to 5 
times more antioxidant power 


than so-called “super berries.” 
22% of all chocolate 


Eating 40 grams of good quality consumption takes place 
organic dark chocolate every day between 8 p.m. and midnight. 
significantly reduces your levels of 

stress hormones and improvesyour 

overall health. 


Because the placement of the text and figures do not line up nicely within a grid, 
you'll position each graphic and text box using the CSS positioning styles. Anne has 
already created the content for this page and written the style sheets to format the 
appearance of the infographic. You will write the style sheet to layout the infographic 
contents using the CSS positioning styles. 
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To open the infographic file: 


»D 1. 


DD 4. 


Use your editor to open the pe_info_txt.html file from the html03 » tutorial 
folder. Enter your name and the date in the comment section of the file and 
save the document as pe_info.html. 


Directly after the title element, insert the following 1ink elements to attach 
the file to the pc_reset.css, pc_styles3.css, and pc_info.css style sheets. 


<link href="pc_reset.css" rel="stylesheet" /> 
<link href="pc_styles3.css" rel="stylesheet" /> 
<link href="pc_info.css" rel="stylesheet" /> 


Take some time to study the structure and content of the pc_info.html 
document. Note that Anne has placed eight information graphics, each 
within a separate div element with a class name of infobox and an id name 
ranging from info1 to infos. 


Close the file, saving your changes. 


Next, you'll start working on the pc_info.css file, which will contain the positioning 
and other design styles for the objects in the infographic. You will begin by formatting 
the main element, which contains the infographics. Because you'll want the position 
of each infographic to be measured from the top-left corner of this container, you will 
place the main element with relative positioning and extend the height of the container 
to 1400 pixels so that it can contain all eight of the graphic elements. 


To format the main element: 


»D 1. 


Use your editor to open the pe_info_txt.css file from the html03 > tutorial 
folder. Enter your name and the date in the comment section of the file and 
save the document as pc_info.css. 


It will be easier to see the effect of placing the different div elements if they 
are not displayed until you are ready to position them. Add a rule to hide the 
div elements, then as you position each element, you can add a style rule to 
redisplay it. 


Directly before the Main Styles section, insert the following style rule to hide 
all of the infoboxes: 


div.infobox {display:none; } 


Figure 3-64 highlights the newly added code in the style sheet. 
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Figure 3-64 Setting the display styles of the main element 


hides the div elements of div.infobox {dispLlay:none;} 
the infobox class 


sets the height of the main 
element to 1400 pixels and 


main { 
position: relative; 


places the main 
element using 
relative positioning 


height: 1400px; 
makes it the width of the width: 100%; 


page body } 


BD 4. Save your changes to the file and then open the pc_info.html file in your 
browser. Verify that the browser shows an empty box, about 1400 pixels high, 
where the infographic will be placed. 


Next, you will add a style rule for all of the information boxes so that they are placed 
within the main element using absolute positioning. 


To position the information boxes: 


D 1. Return to the pe_info.ess file in your editor and scroll down to the Infographic 
Styles section. 


BD 2. Add the following style rule to set the position type of all of the 


information boxes. 


div.infobox { 
position: absolute; 


} 


Within the First Infographic section, add the following style rule to position 
the first information box 20 pixels from the top edge of its container and 5% 
from the left edge. 


div#infol { 
display: block; 
top: 20px; 
left: 5%; 


} 


Note that we set the display property to block so that the first information 
box is no longer hidden on the page. Figure 3-65 highlights the style rules for 
all of the information boxes and the placement of the first information box. 
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Figure 3-65 Placing the first information box 


/* Infographic Styles */ 


places every 
information box 
using absolute 

positioning 


div.infobox £ 
position: absolute; 
} 


/* First Infographic */ 


div#infol { 
display: block; 
top: 20px; 
left: 5%5 


places the first box 
20 pixels from the 
top edge of the 
main element and 
5% from the left 


BD 4. Save your changes to the file and then reload the pc_info.html file in your 
browser. Figure 3-66 shows the placement of the first information box. 


Figure 3-66 Appearance of the first information box 


placement of the 
first information box 


Now place the second and third information boxes. 


To place the next two boxes: 


D 1. Return to the pe_info.css file in your editor and go to the Second Infographic 
section. 


BD 2. Add the following style rule to place the second box 185 pixels down from 
the top of the container and 42% from the left edge. 


div#info2 { 
display: block; 
tops >px; 
left: 42%; 
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BD 3. Within the Third Infographic section insert the following style rule to place 
the third box 135 pixels from the top edge and 75% of the width of its 
container from the left edge. 


div#info3 { 
display: block; 
topes Spx; 
left: 75%; 


} 


Figure 3-67 highlights the style rules to position the second and third 
information boxes. 


Figure 3-67 Positions of the second and third boxes 


/* Second Infographic */ 


div#info2 { 

places the second display: block; 
box 185 pixels top: 185px; 

from the top and left: 42%} 

42% from the left } 


/* Third Infographic */ 


div#info3 { 

places the third display: block; 
box 135 pixels top: 135px; 

from the top and left: 75%} 

75% from the left 


D4. Save your changes to the file and reload pc_info.html in your browser. Figure 3-68 
shows the placement of the first three information boxes. 


Figure 3-68 Placement of the first three boxes 


second 
information 
box 


third 
information 
box 
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Place the next three information boxes. 


To place the next three boxes: 


D 1. Return to the pe_info.css file in your editor, go to the Fourth Infographic 
section and place the fourth box 510 pixels from the top edge and 8% from 
the left edge. 


div#info4 { 
display: block; 
top: 510px; 
left: 8%; 


} 


BD 2. Add the following style rule to the Fifth Infographic section to position the 
fifth box: 


div#info5 { 
display: block; 
top: 800px; 


left: 3%; 
} 
BD 3. Add the following style rule to the Sixth Infographic section to position the 
sixth box: 


div#info6 { 
display: block; 
top: 600px; 
left: 48%; 


} 


Figure 3-69 highlights the positioning styles for the fourth, fifth, and sixth 
information boxes. 


Tutorial 3 Designing a Page Layout | HTML 5 and CSS HTML 251 


Figure 3-69 Positions of the fourth, fifth, and sixth boxes 


/* Fourth Infographic */ 


div#info4 { 

places the fourth display: block; 
box 510 pixels top: 510px; 

from the top and left: 8% 

8% from the left } 


/* Fifth Infographic */ 


div#infos { 
places the fifth display: block; 


box 800 pixels top: 800px; 
from the top and left: 3%: 
3% from the left } : 


/* Sixth Infographic */ 


div#infos { 

places the sixth display: block; 
box 600 pixels top: 600px; 

from the top and left: 48% 

48% from the left 


BD 4. Save your changes to the file and reload pc_info.html in your browser. 
Figure 3-70 shows the revised layout of the infographic. 


Figure 3-70) Placement of the next three boxes 


sixth 
fourth information 
information box 
box 


fifth 
information 
box 
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Complete the layout of the infographic by placing the final two boxes on the page. 


To place the last two boxes: 


D 1. Return to the pe_info.css file in your editor, go to the Seventh Infographic 
section and insert the following style rules: 


div#info7 { 
display: block; 
top: 1000px; 
left: 68%; 


} 
BD 2. Add the following style rules to the Eighth Infographic section: 


div#infos { 
display: block; 
top: 1100px; 
left: 12%; 


} 


Figure 3-71 highlights the style rules for the seventh and eighth information 
boxes. 


Figure 3-71 Positioning the seventh and eighth boxes 


div#info7 { 
display: block; 
top: 1000px; 
left: 68%; 


places the 
seventh box 
1000 pixels from 
the top and 68% 
from the left 


div#infos8 { 


places the eighth 
box 1100 pixels 
from the top and 


display: block; 
top: 1100px; 
left: 


12% 


12% from the left 


D 3. Scroll up to before the Main Styles section and delete the style rule 
div.infobox {display: none; } because you no longer need to hide any 
information boxes. 


BD 4. Save your changes to the file and reload pc_info.html in your browser. 
Figure 3-72 show the complete layout of the eight boxes in the infographic. 
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Final layout of the infographic 


A single cocoa tree produces 
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chocolate or 400 bars of dark 
chocolate every year 
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INSIGHT 


Anne likes the appearance of the infographic, but she is concerned about its length. 
She would like you to reduce the height of the infographic so that it appears within 
the boundaries of the browser window. This change will create overflow because the 
content is longer than the new height. You will read more about overflow and how to 
handle it now. 


Creating an Irregular Line Wrap 


Many desktop publishing and word-processing programs allow designers to create 
irregular line wraps in which the text appears to flow tightly around an image. This is 
not easily done in a web page layout because all images appear as rectangles rather 
than as irregularly shaped objects. However, with the aid of a graphics package, you 
can simulate an irregularly shaped image. 

The trick is to use your graphics package to slice the image horizontally into several 
pieces and then crop the individual slices to match the edge of the image you want 
to display. Once you've edited all of the slices, you can use CSS to stack the separate 
slices by floating them on the left or right margin, displaying each slice only after the 
previous slice has been cleared. For example, the following style rule stacks all inline 
images that belong to the “slice” class on the right margin: 


img.slice { 
clear: right; 
ie IWOBNE S TeakSjlale’ fF 
margin-top: Opx; 
margin-bottom: Opx; 


} 


Now any text surrounding the stack of images will tightly match the image's 
boundary, creating the illusion of an irregular line wrap. Note that you should always 
set the top and bottom margins to 0 pixels so that the slices join together seamlessly. 


Handling Overflow 


The infographic is long because it displays several information boxes. If you reduce the 
height of the infographic you run the risk of cutting off several of the boxes that will no 
longer fit within the reduced infographic. However you can control how your browser 
handles this excess content using the following overflow property 


overflow: type; 


where type is visible (the default), hidden, scroll, or auto. A value of visible 
instructs browsers to increase the height of an element to fit the overflow content. 

The hidden value keeps the element at the specified height and width, but cuts off 
excess content. The scroll value keeps the element at the specified dimensions, but 
adds horizontal and vertical scroll bars to allow users to scroll through the overflowed 
content. Finally, the auto value keeps the element at the specified size, adding scroll 
bars only as they are needed. Figure 3-73 shows examples of the effects of each 
overflow value on content that is too large for its space. 
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Figure 3-73 Values of the overflow property 
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CSS also provides the overflow-x and overflow-y properties to handle overflow 
specifically in the horizontal and vertical directions. 


Working with Overflow 


¢ To specify how the browser should handle content that overflows the element's 
boundaries, use the property 


overflow: type; 


REFERENCE 


where type is visible (the default), hidden, scroll, or auto. 


You decide to limit the height of the infographic to 450 pixels and to set the overflow 
property to auto so that browsers displays scroll bars as needed for the excess content. 


To apply the overflow property: 
BD 1. Return to the pe_info.css file in your editor and go to the Main Styles section. 
D 2. Within the style rule for the main selector, insert the property overflow: auto;. 
BD 3. Reduce the height of the element from 1400px to 450px. 
Figure 3-74 highlights the revised code in the style rule. 
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Figure 3-74 Setting the overflow property 


/* Main Styles */ 


( displays scrollbars | |main { 
if the content 
overflows the — — 3 a 
allotted height position: relative; | sets the height of 

height: 450px;<«——+ | the infographic 
width: 100%; | to 450 pixels 


Hm overflow: auto; 


D 4. Close the file, saving your changes. 


BD 5. Reload the pc_info.html file in your browser. As shown in Figure 3-75, the 
height of the infographic has been reduced to 450 pixels and scrollbars have 
been added that you can use to view the entire infographic. 


Final layout of the infographic page 


on 
height of the 
infographic set -——— 
at 450 pixels J 


| scrollbar automatically 
added to view the 
infographic content 


D 6. Close any open files now. 
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Managing White Space with CSS 


Scroll bars for overflow content are usually placed vertically so that you scroll down to 
view the extra content. In some page layouts, however, you may want to view content 
in a horizontal rather than a vertical direction. You can accomplish this by adding the 
following style properties to the element: 


INSIGHT 


overflow: auto; 
white-space: nowrap; 


The white-space property defines how browsers should handle white space in the 
rendered document. The default is to collapse consecutive occurrences of white space 
into a single blank space and to automatically wrap text to a new line if it extends beyond 
the width of the container. However, you can set the white-space property of the 
element to nowrap to keep inline content on a single line, preventing line wrapping. 
With the content thus confined to a single line, browsers will display only horizontal scroll 
bars for the overflow content. Other values of the white-space property include normal 
(for default handling of white space), pre (to preserve all white space from the HTML file), 
and pre-wrap (to preserve white space but to wrap excess content to a new line). 


Clipping an Element 


Closely related to the overflow property is the clip property, which defines a 
rectangular region through which an element's content can be viewed. Anything that 
lies outside the boundary of the rectangle is hidden. The syntax of the clip property is 


clip: rect(top, right, bottom, left); 


where top, right, bottom, and left define the coordinates of the clipping rectangle. 
For example, a clip value of rect(100px, 270px, 260px, 65px) defines a clip region whose 
top and bottom boundaries are 100 and 260 pixels from the top edge of the element, and 
whose right and left boundaries are 270 and 65 pixels from the element's left edge. See 
Figure 3-76. 


100px 


260px 


65px 


clip: rect(100px, 270px, 260px, 65px) clipped image 


© Brent Hofacker/Shutterstock.com 
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The top, right, bottom, and left values also can be set to auto, which matches the 
specified edge of the clipping region to the edge of the parent element. A clip value of 
rect(10, auto, 125, 75) creates a clipping rectangle whose right edge matches the right 
edge of the parent element. To remove clipping completely, apply the style clip: auto. 
Clipping can only be applied when the object is placed using absolute positioning. 


Clipping Content 
¢ To clip an element's content, use the property 
Gilaljgg seecle (ieejo), suciate, Iotercicen, etic) 9 


where top, right, bottom, and left define the coordinates of the clipping rectangle. 
¢ To remove clipping for a clipped object, use 
llaljeyg  Elbkeve)p 


REFERENCE 


Stacking Elements 


Positioning elements can sometimes lead to objects that overlap each other. By default, 
elements that are loaded later by the browser are displayed on top of elements that are 

loaded earlier. In addition, elements placed using CSS positioning are stacked on top of 
elements that are not. To specify a different stacking order, use the following z-index 


property: 
z-index: value; 


where value is a positive or negative integer, or the keyword auto. As shown in 
Figure 3-77, objects with the highest z-index values are placed on top of other page 
objects. A value of auto stacks the objects using the default rules. 


Figure 3-77 Using the z-index property to stack elements 


z-index: 1 


z-index: 3 


The z-index property works only for elements that are placed with absolute positioning. 
Also, an element's z-index value determines its position relative only to other elements that 
share a common parent; the style has no impact when applied to elements with different 
parents. Figure 3-78 shows a layout in which the object with a high z-index value of 4 is 
still covered because it is nested within another object that has a low z-index value of 1. 
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Figure 3-78 Stacking nested objects 


nested object 


z-index: 2 


You do not need to include the z-index property in your style sheet because none 
of the elements in the infographic page are stacked upon another. 


4 Problem Solving: Principles of Design 


Good web page design is based on the same common principles found in other areas 
of art, which include balance, unity, contrast, rhythm, and emphasis. A pleasing layout 
involves the application of most, if not all, of these principles, which are detailed below: 


e Balance involves the distribution of elements. It's common to think of balance in terms of 
symmetrical balance, in which similar objects offset each other like items on a balance 
scale; but you often can achieve more interesting layouts through asymmetrical balance, 
in which one large page object is balanced against two or more smaller objects. 

¢ Unity is the ability to combine different design elements into a cohesive whole. This is 
accomplished by having different elements share common colors, font styles, and sizes. 
One way to achieve unity in a layout is to place different objects close to each other, 
forcing your viewers’ eyes to see these items as belonging to a single unified object. 

¢ Contrast consists of the differences among all of the page elements. To create 
an effective design, you need to vary the placement, size, color, and general 
appearance of the objects in the page so that your viewers’ eyes aren't bored by the 
constant repetition of a single theme. 

¢ Rhythm is the repetition or alteration of a design element in order to provide a 
sense of movement, flow, and progress. You can create rhythm by tiling the same 
image horizontally or vertically across the page, by repeating a series of elements 
that progressively increase or decrease in size or spacing, or by using elements with 
background colors of the same hue but that gradually vary in saturation or lightness. 

¢ Emphasis involves working with the focal point of a design. Your readers need a few 
key areas to focus on. It's a common design mistake to assign equal emphasis to all 
page elements. Without a focal point, there is nothing for your viewers’ eyes to latch 
onto. You can give a page element emphasis by increasing its size, by giving it a 
contrasting color, or by assigning it a prominent position in the page. 


PROSKILLS hy 


Designers usually have an intuitive sense of what works and what doesn’t in page 
design, though often they can’t say why. These design principles are important 
because they provide a context in which to discuss and compare designs. If your page 
design doesn't feel like it’s working, evaluate it in light of these principles to identify 
where it might be lacking. 
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Anne is pleased with the final design of the infographic page and all of the other 
pages you've worked on. She'll continue to develop the website and test her page 
layouts under different browsers and screen resolutions. She'll get back to you with 
future projects as she continues the redesign of the Pandaisia Chocolates website. 


Session 3.3 Quick Check 


1. To shift an object from its default placement in the document flow but keep it 
within the document flow, use: 
a. absolute positioning 
b. relative positioning 
c. fixed positioning 
d. static positioning 
2. Provide a style to shift rule to shift an article element 15 pixels to the left of its 
default position in the document flow. 
a. article { 
position: absolute; 
left: 15px; 


REVIEW 


} 


b. article { 
position: relative; 
left: 15px; 
} 
Cc. article { 
position: absolute; 
left: -15px; 
} 
d. article { 
position: relative; 
left: -15px; 
} 
3. Provide a style to place an article element 15 pixels up from the top edge of its 
container element. 
a. article { 
position: absolute; 
top: 15px; 
} 
b. article { 
position: relative; 
top: 15px; 
} 
C. article { 
position: absolute; 
top: -15px; 
} 
d. article { 
position: relative; 
top: -15px; 
} 
4. To place an object using absolute positioning within its container, the 
container: 
a. must also have absolute positioning 
b. must have absolute or relative positioning 
c. must have statistic positioning 
d. must not have any position property value 
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. Provide a style property to display scrollbars when the element content 
exceeds the element’s boundaries. 

a. overflow: auto; 

b. overflow: scroll; 

Cc. overflow: scrollbar; 

d. overflow: true; 

. An inline image is 400 pixels wide by 300 pixels high. Provide a style rule to 
clip this image by 10 pixels on each edge. 

a. clip: rect(10, 390, 290, 10); 

b. clip: 10; 

c. clip: -10; 

d. clip: 10 390 290 10; 

. If two elements overlap, the one displayed on top will: 

a. be listed first in the document order 

b. have the greater height and width 

c. have the lower z-index value 

d. have the higher z-index value 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code3-1_txt.html, code3-1_float_txt.css, code3-1.css, 
lincoln01.png - lincoln10.png 


CODE 


Figure 3-79 shows an example page containing two applications of floating objects. In the first 

line of Lincoln’s second inaugural speech a drop capital is created by floating the first letter of the 
first paragraph next to the surrounding text. The text of the speech is wrapped around the image of 
Lincoln using an irregular line wrap. This effect is created by cutting the Lincoln image into separate 
strips which are floated and stacked on top of each other. In this Coding Challenge you will explore 
how to create both effects. 


Coding Challenge 3-1 example page 


Lincoln's Second Inaugural 


because of offenses! For it must needs be that offenses come; but 

woe to that man by whom the offense cometh.” If we shall 

suppose that American slavery is one of those offenses which, in 
the providence of God, must needs come, but which, having continued 
through his appointed time, he now wills to remove, and that he gives to 
both North and South this terrible war, as the woe due to those by whom 
the offense came, shall we discern therein any departure from those divine 
attributes which the believers in a living God always ascribe to him? 


T HE ALMIGHTY HAS HIS OWN PURPOSES. "WOE UNTO THE WORLD 


Fondly do we hope — fervently do we pray — that this mighty scourge af 
war may speedily pass away. Yet. if God wills that it continue until 
all the wealth piled by the bondsman’s two hundred and fifty years 
of unrequited toil shall be sunk, and until every drop of blood 
drawn by the lash shall be paid by another drawn with the sword, 
as was said three thousand years ago, so still it must be said, 

“The judgments of the Lord are true and righteous altogether.” 


With malice toward none; with charity for all; with firmness 
in the right, as God gives us to see the right, let us strive on 
to finish the work we are in; to bind up the nation’s wounds; 
to care for him who shall have borne the battle, 
and for his widow, and his orphan — to do all 
which may achieve and cherish a just and 
lasting peace among ourselves, and with all 
nations. 


Do the following: 


1. Open the code3-1_txt.html and code3-1_float_txt.css files from the html03 » code folder. 
Enter your name and the date in each document and save the files as code3-1.html and 
code3-1_float.css respectively. 

2. Go to the code3-1.html file in your editor. Within the head section insert a link element linking 
the page to the code3-1_float.css style sheet file. Take some time to study the content of the page 
and then save your changes to the file. 


3. Go to the code3-1_float.css file in your editor. 


Library of Congress, Prints & Photographs Division, Reproduction number LC-DIG- 


ppmsca-19469 (digital file from original) 
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4. To create a drop cap, insert a style rule for the selector p: first-of-type:first-letter and 
add the following styles: 


a. Float the element on the left margin. 
b. Set the font size to 4em and the line height to 0.8em. 


c. Set the size of the right margin and padding space to 0.1em. Set the bottom padding to 
0.2em. 


5. Display the first line of the speech in small caps by adding a style rule for the selector 
p:first-of-type: first-line that changes the font variant to small-caps and the 
font size to 1.4em. 


6. For all img elements create a style rule to set the height of the image to 3.3em and float the 
image on the right margin, but only when the page is cleared of floats. 


7. Save your changes to the style sheet. 


8. Open the page in your browser and verify the layout of the page resembles that shown in 
Figure 3-79. 


9. Submit the completed file to your instructor. 


Coding Challenge 2 


Data Files needed for this Coding Challenge: code3-2_txt.html, code3-2_grad_txt.css, code3-2.css, 
landscape.png 


CODE 


Figure 3-80 shows a proposed layout for a new web page. At this point the final content is not ready 
for the web page, so the layout is shown using lorem ipsum text. You’ve been given the HTML code 
for the page and your challenge is to create the page layout using CSS grid styles. 


Complete the following: 


1. Open the code3-2_txt.html and code3-2_layout_txt.css files from the html03 » code2 folder. 
Enter your name and the date in each document and save the files as code3-2.html and 
code3-2_layout.css respectively. 
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2. Go to the code3-2.html file in your editor. Within the head section insert a Link element linking 
the page to the code3-2_layout.css file. Study the contents of the file, taking note of the structure, 
element names, and element ids. Save your changes. 


3. Go to the code3-2_layout.css file. Create a style rule for the header, footer, aside, article, 
and a (hyperlink) elements to set the padding space to 10 pixels and add a 3-pixel gray dashed 
outline. 


4. Create a style rule for the body element that: 


a. Sets the width to 90% of the browser window, ranging from a minimum width of 640 pixels 
up to a maximum width of 1024 pixels. 


. Sets the top/bottom margin to 30 pixels and the left/right margin to auto. 

. Displays the body as a CSS grid. 

. Creates six grid columns each with a width of 1fr. 

. Creates five grid rows with widths of 50 pixels, 30 pixels, 1fr, 1fr, and 100 pixels. 
. Adds a grid gap of 15 pixels. 

. Display the a (hyperlink) element as a block. 


@ CL ©) © 


Oo 
= 


6. Set the size of the grid items as follows: 
a. Have the header element span from gridline 1 to gridline -1. 
b. Have the article#intro element span two rows and two columns. 
c. Have the article#main element two rows and three columns. 
d. Have the footer element span two columns. 
7. Save your changes to the style sheet. 


ee) 


. Open the page in your browser and verify the layout of the page resembles that shown in 
Figure 3-80. 


9. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code3-3_txt.html, code3-3_scroll_txt.css, 
code3-3_styles.css, image01.png - image09.png 


CODE 


You can use the CSS positioning and overflow styles to create a scrolling slideshow. Figure 3-81 
shows an example of a slideshow consisting of nine sketches by Renaissance masters. You've been 
given the HTML code for this document and you've been asked to write the style rules to generate 
the slideshow. 
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Coding Challenge 3-3 example page 
Artist Sketchbook 


Source: Public Domain 


Complete the following to create the web page: 


1. Open the code3-3_txt.html and code3-3_scroll_txt.css files from the html03 » code3 folder. 
Enter your name and the date in each document and save the files as code3-3.html and 
code3-3_scroll.css respectively. 


2. Go to the code3-3.html file in your editor. Link the file to the code3-3_scroll.css style sheet file. 
Review the contents of the document and then save your changes to the file. 


3. Go to the code3-3_scroll.css file in your editor. Create a style rule for the section element with 

the id “container” with the following styles: 

a. Set the width of the element to 900 pixels and the height to 370 pixels. 

b. Horizontally center the element by adding a 10-pixel top/bottom margin and set the left/right 
margin to auto. 

c. Place the element with relative positioning, setting the top value to 30 pixels and the left value 
to 0 pixels. 

d. Add a 2-pixel solid brown outline to the element. 

e. Have the browser automatically display scrollbars for any overflow content. 

4. Create a style rule for every div element, setting the width to 300 pixels and the height to 330 
pixels. Position the element with absolute positioning. 

5. Display every inline image as a block-level element with a width and height of 300 pixels. 

6. There are nine div elements with ids ranging from “slide1” to “slide9”. Set the left position of 
the elements in 300-pixel increments starting with 0 pixels for slide1, 300 pixels for slide2, 600 
pixels for slide3, and so forth up to 2400 pixels for slide9. 

7. Save your changes to the style sheet. 


8. Open the page in your browser. Verify that the nine images are displayed within a scroll box and 
that you can using a horizontal scrollbar to scroll through the image list. 


9. Submit the completed file to your instructor. 
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Coding Challenge 4 


Data Files needed for this Coding Challenge: code3-4_txt.html, debug3-4_txt.css, code3-4_.css, 
redball.png 


Figure 3-82 shows a completed web page that uses CSS to design the page layout. You’ve been given 
the initial HTML and CSS code for this web page, but there are several errors in the CSS stylesheet. 
Use your knowledge of CSS to locate and fix the errors. 


Coding Challenge 3-4 example page 


At Red Ball Pizza, we want to satisty every appetite. That's why our 
menu contains a variety of different items. With so many choices. 
everyone's favorites are available! 


Red Ball Pizza is NOT a franchise, a chain, or a corporation. It is 

100% locally owned and operated. Red Ball Pizza is devoted to 

providing the highest quality and the best service possible. Our 
h & Snnmg only goal is to provide you with a great pizza ... EVERY TIME! 


' 7 

{16° Specany Paza Reg | | Suy aey 16" Speciamy 
«Creene Stix 6 ter Fore sPisza at Reg, Price 6 Get a 
Oniy $21.99 


16" 1-Topping Panza 4 a2 
Laer of Your Croice For 
Onty $t4 99 


2nd Pizza For Haif Price 


Expres 314 Expres 2/14 


' 
Gat $3.00 Of any 16° Oust 


' 
1 Toasted Sup 6 Caps 6 1* 
at Menu Price . 


200r Soda For Onty $6.99, 


14° 2-Topping Purra & 12 
Wings For Onty $15 99 


Expres 331 Expres 3/31 


Maxim Maksutov/sshutterstock.om; @Shebeko/Shutterstock.com 


Do the following: 


il. 


Open the code3-4_txt.html and debug3-4_txt.css files from the html03 > code4 folder. Enter 
your name and the date in each document and save the files as code3-4.html and debug3-4.css 
respectively. 


2. Go to the code3-4.html file in your editor. Link the page to the debug3-4.css style sheet file. 


Study the contents of the file and then save your changes. 


3. Go to the debug3-4.css file in your browser. 
4. The body element should have a width that is 90% of the width of the browser window ranging 


from a minimum of 600 pixels up to a maximum of 1024 pixels. Fix the syntax errors in the body 
style rule that defines the width of the web page. 


5. The style rule for the body element sets up a grid layout for the page. However, there are several 


errors in defining the grid areas, grid columns, and grid gaps. Fix the syntax errors in the style 
rule. 


6. Go to the style rules in the Grid Areas section that assigns page elements to areas of the grid. 


Locate and fix the errors in assigning elements to grid areas. 
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7. The style rules for the horizontal navigation list and the section element also define grid styles 
for those elements. Locate and fix errors in the code that set up the grid columns. 

8. The last paragraph within the section div selector should be placed with absolute positioning 
1 pixel and 5 pixels from the bottom right corner of the container element. However, there is an 
error in defining the selector. Find and fix the error. 

9. Save your changes and open the code3-4.html file in your browser. Verify that design of the page 
resembles that shown in Figure 3-82. 

10. Submit the completed file to your instructor. 


Review Assignments 


Data Files needed for the Review Assignments: pc_specials_txt.html, pc_specials_txt.css, 
2 CSS files, 8 PNG files, 1 TTF file, 1 WOFF file 


Anne wants you to work on another page for the Pandaisia Chocolates website. This page will 
contain information on some of the specials offered by the company in March; it will also display a 
list of some awards that the company has won. As you work on the page, you will use clip art images 
as placeholders until photographs of the awards are available. A preview of the completed page is 
shown in Figure 3-83. 


Figure 3-83 


PRACTICE 


March Specials web page 


© Arina P Habich/Shutterstock.com; 
© Alexander Chaikin/Shutterstock.com; © ESB Professional/Shutterstock.com 


Anne has already created the page content and some of the design styles to be used in the page. Your 
job will be to come up with the CSS style sheet to set the page layout. 
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Complete the following: 


the 


10. 


2. 


Ney. 


14. 


IS. 


Use your editor to open the pc_specials_txt.html and pc_specials_txt.css files from the 
html03 » review folder. Enter your name and the date in the comment section of each file, 
and save them as pc_specials.html and pc_specials.css respectively. 


. Go to the pc_specials.html file in your editor. Within the document head, create links to the 


pc_reset2.css, pc_styles4.css, and pc_specials.css style sheets. 


. Take some time to study the content and structure of the document, paying careful attention to 


the use of ids and class names in the file. Save your changes to the file. 


. Go to the pc_specials.css file in your editor. Within the Page Body Styles section, add a style rule 


for the body element that sets the width of the page body to 95% of the browser window width 
within the range of 640 to 960 pixels. Horizontally center the page body within the window by 
setting the left and right margins to auto. 


. Go to the Image Styles section and create a style rule that displays all img elements as blocks 


with a width of 100%. 


. Anne wants the navigation list to be displayed horizontally on the page. Go to the Horizontal 


Navigation Styles section and create a style rule for every list item within a horizontal navigation 
list that displays the list item as a block floated on the left margin with a width of 16.66%. 


. Display every hypertext link nested within a navigation list item as a block. 
. Next, you will create the grid styles for the March Specials page. Go to the Grid Styles section 


and create a style rule for the body element that displays the element as a grid with two columns 
in the proportion of 2:1 (using £x units) with a column grid gap of 20 pixels. 


. Create a style rule for the header and footer elements that has both elements span the grid 


from the gridline number 1 to gridline number -1. 


Create a style rule for the section element with the id “sub” that displays that element as a grid 
consisting of three columns of equal width by repeating the column width 1fr three times. 


. Go to the Specials Styles section. In this section, you will create styles for the monthly specials 


advertised by the company. Create a style rule for all div elements of the specials class that sets 
the minimum height to 400 pixels and adds a 1 pixel dashed outline around the element with a 
color value of rgb(71, 52, 29). 

Go to the Award Styles section. In this section, you will create styles for the list of awards won 
by Pandaisia Chocolates. Information boxes for the awards are placed within an aside element. 
Create a style rule for the aside element that places it using relative positioning, sets its height to 
650 pixels, and automatically displays scrollbars for any overflow content. 

Every information box in the aside element is stored in a div element. Create a style rule that 
places these elements with absolute positioning and sets their width to 30%. 

Position the individual awards within the awardList box by creating style rules for the div 
elements with id values ranging from award1 to award5 at the following (top, /eft) coordinates: 
award1 (80px, 5%), award2 (280px, 60%), award3 (400px, 20%), award4 (630px, 45%), and 
award5 (750px, 5%). (Hint: In the pc_specials.html file, the five awards have been placed in a 
div element belonging to the awards class with id values ranging from award1 to award5.) 
Save your changes to the style sheet and then open the pc_specials.html file in your browser. 
Verify that the layout and design styles resemble the page shown in Figure 3-83. 
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Case Problem 1 


Data Files needed for this Case Problem: sp_home_txt.html, sp_layout_txt.css, 2 CSS files, 11 PNG files 


Slate & Pencil Tutoring Karen Cooke manages the website for Slate & Pencil Tutoring, an online 
tutoring service for high school and college students. Karen is overseeing the redesign of the website 
and has hired you to work on the layout of the site’s home page. Figure 3-84 shows a preview of the 
page you'll create for Karen. 


Figure 3-84 Slate & Pencil Tutoring home page 


APPLY 


Horne 

'Our Tutors 
Pricing 
Testimoniats 
Your Account 
Chat Online 
Error Reporting 


Instructor Portal 


© Monkey Business Images/Shutterstock.com; 
© Courtesy Patrick Carey 


Karen has supplied you with the HTML file and the graphic files. She has also given you a base style 
sheet to initiate your web design and a style sheet containing several typographic styles. Your job will 
be to write up a layout style sheet according to Karen’s specifications. 


Complete the following: 


1. Using your editor, open the sp_home_txt.html and sp_layout_txt.css files from the html03 > case 
folder. Enter your name and the date in the comment section of each file, and save them as 
sp_home.html and sp_layout.css respectively. 

2. Go to the sp_home.html file in your editor. Within the document head, create links to the 
sp_base.css, sp_styles.css, and sp_layout.css style sheet files. Study the content and structure of 
the file and then save your changes to the document. 
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3. Go to the sp_layout.css file in your editor. Go to the Window and Body Styles section. Create a 
style rule for the html element that sets the height of the browser window at 100%. 

4. Create a style rule for the page body that sets the width to 95% of the browser window ranging 
from 640 pixels up to 960 pixels. Horizontally center the page body within the browser window. 
Finally, Karen wants to ensure that the height of the page body is always at least as high as the 
browser window itself. Set the minimum height of the browser window to 100%. 

5. Add a style rule to display all inline images as blocks. 

6. Within the CSS Grid Styles section create a style rule that displays the body element as a grid 
with four columns of length 1fr. 

7. Create a style rule for the img element with id "logo" so that the logo image spans three columns 
and has a width of 100%. 

8. For the horizontal navigation list and the footer element create a style rule so that those 
elements span four columns. Create a style for the aside element to span two columns. 

9. Within the Horizontal Navigation List Styles section create a style rule for 11 elements nested 
within the horizontal navigation list that display each element as a block with a width of 12.5% 
and floated on the left margin. 

10. Within the Section Styles section create a style rule for inline images within the section element 
that sets the width of the image to 50% and centers the image using a top/bottom margin of 0 
and a left/right margin of auto. 

11. Create a style rule for paragraphs within the section element that sets the width of the 
paragraph to 70% and centers the paragraph using a top/bottom margin of 0 and a left/right 
margin of auto. 

12. Go to the Customer Comment Styles section and create a style rule for the aside element setting 
the width to 75% and the bottom padding to 30 pixels. 

13. The six aside elements will be displayed in two columns. For odd-numbered aside elements, 
use the justify-self grid property to place the element on the end (right) margin. (Hint: Use 
the nth-of-type (odd) pseudo-class to select the odd-numbered aside elements.) 

14. Float inline images nested within the aside element on the left with a width of 20%. 

15. Float paragraphs nested within the aside element on the left with a width of 75% and a left 
margin of 5%. 

16. Save your changes to the file and then open the sp_home.html file in your browser. Verify that 
the layout and appearance of the page elements resemble that shown in Figure 3-84. 


Case Problem 2 


Data Files needed for this Case Problem: ss_dday_txt.html, ss_layout_txt.css, 1 CSS file, 3 PNG files 


A Soldier’s Scrapbook Jakob Bauer is a curator at the Veteran’s Museum in Raleigh, North Carolina. 
Currently he is working on an exhibit called A Soldier’s Scrapbook containing mementos, artifacts, 
journals, and other historic items from the Second World War. You've been asked to work on a 

page for an interactive kiosk used by visitors to the exhibit. Jakob has already supplied much of the 
text and graphics for the kiosk pages but he wants you to complete the job by working on the page 
layout. 


CHALLENGE 


The page you will work on provides an overview of the Normandy beach landings on June 6", 1944. 
Since this page will be displayed only on the kiosk monitor, whose screen dimensions are known, 
you'll employ a fixed layout based on a screen width of 1152 pixels. 


Jakob also wants you to include an interactive map of the Normandy coast where the user can hover 
a mouse pointer over location markers to view information associated with each map point. To create 
this effect, you'll mark each map point as a hypertext link so that you can apply the hover pseudo- 
class to the location. In addition to the interactive map, Jakob wants you to create a drop cap for the 
first letter of the first paragraph in the article describing the Normandy invasion. Figure 3-85 shows a 
preview of the page you'll create. 


Tutorial 3 Designing a Page Layout | HTML 5 and CSS 


HTML 271 


Figure 3-85 Normandy Invasion kiosk page 


Interactive Map 


Hover the pointer over the battle markers * in the map to view more detatied 
information about each landing site 
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hovering the pointer 
over the map marker ... 


... displays 
information about 
the location 


Source: Chief Photographer's Mate (CPHOM) Robert F. Sargent, U.S. Coast Guard/National Archives and Records Administration; 
Source: U.S. Department of Defense/Wikimedia Commons; © Patrick Carey 


Complete the following: 


1. Using your editor, open the ss_dday_txt.html and ss_layout_txt.css files from the html03 > case2 
folder. Enter your name and the date in the comment section of each file, and save them as 
ss_dday.html and ss_layout.css respectively. 

2. Go to the ss_dday.html file in your editor. Within the document head, create links to the 
ss_styles.css and ss_layout.css style sheet files. Study the content and structure of the document. 
Note that within the aside element is an image for the battle map with the id map/mage. Also 
note that there are six marker images enclosed within hypertext links with ids ranging from 
marker1 to maker6. After each marker image are div elements of the mapInfo class with IDs 
ranging from info1 to info6. Part of your style sheet will include style rules to display these div 
elements in response to the mouse pointer hovering over each of the six marker images. 

3. Save your changes to the file and then go to the ss_layout.css file in your editor. 


4. Go to the Article Styles section. Within this section, you'll lay out the article describing the 
Normandy Invasion. Create a style rule to float the article element on the left margin and set 
its width to 384 pixels. 
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Explore 5. Jakob wants the first line from the article to be displayed in small capital letters. Go 


to the First Line and Drop Cap Styles section and create a style rule for the first paragraph of the 
article element and the first line of that paragraph, setting the font size to 1.25em and the font 
variant to small-caps. (Hint: Use the first -of -type pseudo-class for the paragraph and the 
first-line pseudo-element for the first line of that paragraph.) 


/ Explore 6. Jakob also wants the first letter of the first line in the article’s opening paragraph to 


10. 


Wl. 


12. 


14. 


be displayed as a drop cap. Create a style rule for the article's first paragraph and first letter that 
applies the following styles: (a) sets the size of the first letter to 4em in a serif font and floats it on 
the left, (b) sets the line height to 0.8em, and (c) sets the right and bottom margins to 5 pixels. 
(Hint: Use the first-letter pseudo-element for the first letter of that paragraph.) 


. The interactive map is placed within an aside element that Jakob wants displayed alongside the 


Normandy Invasion article. Go the Aside Styles section and create a style rule that sets the width 
of the aside element to 768 pixels and floats it on the left margin. 


. Next, you will lay out the interactive map. The interactive map is placed within a div element 


with the ID battleMap. Go to the Map Styles section and create a style rule for this element that 
sets its width to 688 pixels. Center the map by setting its top/bottom margins to 20 pixels and its 
left/right margins to auto. Place the map using relative positioning. 


. The actual map image is placed within an img element with the ID map/mage. Create a style rule 


for this element that displays it as a block with a width of 100%. 

Go to the Interactive Map Styles section. Within this section, you'll create style rules that position 
each of the six map markers onto the battle map. The markers are placed within hypertext links. 
Create a style rule for every a element of the battleMarkers class that places the hypertext link 
using absolute positioning. 

Create style rules for the six a elements with IDs ranging from marker1 to marker6, placing them 
at the following (top, /eft) coordinates: 

marker1 (220, 340) 


marker2 (194, 358) 
marker3 (202, 400) 
marker4 (217, 452) 
marker5 (229, 498) 
marker6 (246, 544) 


The information associated with each map marker has been placed in div elements belonging to 
the mapInfo class. Go to the Map Information Styles section and create a style rule that hides this 
class of elements so that this information is not initially visible on the page. 

Explore 13. To display the information associated with each map maker, you need to create a 
style rule that changes the map information’s display property in response to the mouse pointer 
hovering over the corresponding map marker. Since the map information follows the map marker 
in the HTML file, use the following selector to select the map information corresponding to the 
hovered map marker: a.battleMarkers:hover + div.mapInfo. Write a style rule for this 
selector that sets its display property to block. 

Save your changes to the style sheet and then load ss_dday.html in your browser. Verify that a 
drop cap appears for the first letter of the Normandy Invasion article and the first line of the first 
paragraph is displayed in small caps. Test the interactive map by first verifying that none of the 
information about the six battle locations appears on the page unless you hover your mouse 
pointer over the marker on the battle map. Further verify that when you are not hovering over the 
battle marker, the information is once again not visible on the page. 


TUTORIAL 4 


OBJECTIVES 


Session 4.1 

¢ Create a figure box 

e Add a background image 

¢ Add a border to an element 
¢ Create rounded borders 

* Create a graphic border 


Session 4.2 

¢ Create a text shadow 

e Create a box shadow 

¢ Create linear and radial 
gradients 

e Set the opacity of an element 


Session 4.3 

e Apply a 2D and 3D 
transformation 

¢ Apply a CSS filter 

¢ Create an image map 


STARTING DATA FILES 


Graphic Design 
with CSS 


Creating a Graphic Design for a 
Genealogy Website 


Case | Tree and Book 


Kevin Whitmore is the founder of Tree and Book, a social 
networking website for people interested in documenting their 
family histories, creating online photo albums, and posting stories 
and information about members of their extended families. He has 
come to you for help in upgrading the site’s design. Kevin wants to 
take advantage of some of the CSS styles that can be used to add 
interesting visual effects to his site in order to give his website more 
impact and visual interest. 


tb_genta_txt.html tb_ferris_txt.html code4-1_txt.html 
tb_komatsu_txt.html tb_kathleen_txt.html code4-1_back_txt.css 
tb_visual1_txt.css tb_visual3_txt.css + 2 files 
tb_visual2_txt.css tb_visual4_txt.css 

+ 21 files + 16 files 


code4-2_txt.html code4-3_txt.html code4-4_txt.html 
code4-2_grad_txt.css code4-3_cube_txt.css debug4-4_txt.css 


+ 2 files 


+ 6 files + 2 files 


sf_torte_txt.html cf_home_txt.html 24 demo pages 
sf_effects_txt.css cf_effects_txt.css + 21 files 
+ 11 files + 9 files 


= 
_ 
—_ 
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Session 4.1 Visual Overview: 


The background- 

image property applies 

an image file to the { 
| CiterE background. 


The background 
property defines all 
background options, 
including the use of 
multiple backgrounds. 


(Gre cover keyword 
specifies that the 
background image { 
should completely 
cover the background. 


P 
The border-left and 
border-right 
properties add borders borde 
to the left and right } 

Wedge of the element. 


7 = 
The border-radius 


property creates 
rounded corners with 
| tne specified radius. 


y» background-image: 


L(tb_back2.png) bottom right 
(tb 
ur l(tb_ba k4.png 


The border-image 
property defines an 
image file used to 

create a graphic border. 


Logo Design Studio Pro; 
Source: wiki Media; 
© imtmphoto/Shutterstock.com 


The content-box 
keyword specifies 


that the background 
(tb_backi.png); 


extends only over 
the element content. 


no-repeat ntent -t 
no-repeat tent 
/GBVEFE no epeat padding box; 


— 


back 


yo 


The no-repeat 
keyword specifies that 
no tiling is done with 
the background image. 


Every border is defined by 
its width, style, and color. 


The border property 
adds a border around 
all sides of the element. 


The padding-box 
keyword specifies 
that the background 
extends through the 
padding space. 


The border images are 
based on an image file, 
the size of the slice from 
the image, and how slices 
are displayed along the 
element edge. 
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Backgrounds and Borders 


The tb_back1.png image 
is tiled to fill the element 
background. 


The background image 
tb_back4.png covers the 
entire article’s padding space. 


The Komatsu Family 
The border image 


is based on the 
tb_border.png file. 


The background image 
tb_back3.png is placed 
at the lower-left corner 


The aside element has 
a rounded corner with 
a radius of 30 pixels. 


of the article. 


Genta Komatsu war bom in Hadenc. Jupan jn 
3546, the son of Gora Kometsy and Hissko 
(Sato), The family emigrated to San Francisco in 
2960. Ganta became & U.S. Stzen in 2968 ang 
Mttended the Universty of San Francsco, 
receiving 2 ‘Macer's degree in Chactrical 
Enomecnng. In 1974 he met and marned Mike 
(Ania). daaghiner of Yor and Mane Ack. Mika was 
8 registered nurse and werked at several hospitals 
fi the Gay Area. 


The aside element 
has a 4-pixel wide 
double border. 


Genta paises away from pancreatic cancer in 
* 2019 and = survived by tne brother Michi, wile 
Mika, fom tkko. daughterin-ian Suruko, and 
Qranttson Hirojl Mika fives in eetirement itt 
Ln) Phoenix. near her family and her energenc 
grandson, 


The background image 
tb_back2.png is placed 
at the right corner of 
the article. 


Peat 


Source: Wikimedia Commons; Design Studio Pro; imtmphoto/Shutterstock.com; imtmphoto/ 
Shutterstock.com 
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The semantic difference 
between the figure and 
aside elements is that the 
figure element should 
be used for content that 

is directly referenced from 
within an article while the 
aside element is used for 
extraneous content. 


Creating Figure Boxes 


So far your work with CSS visual design styles has been limited to typographical styles 
and styles that modify the page’s color scheme. In this tutorial, you'll explore other CSS 
styles that allow you to add figure boxes, background textures, background images, 
and three-dimensional effects to your web pages. 

You'll start by examining how to work with figure boxes. In books and magazines, 
figures and figure captions are often placed within a separate box that stands apart 
from the main content of the article, using the following figure and figcaption 
elements: 


<figure> 

content 

<figcaption>caption text</figcaption> 
</figure> 


where content is the content that will appear within the figure box and caption text 
is the description text that accompanies the figure. The £igcaption element is optional 
and can be placed either directly before or directly after the figure box content. For 
example, the following code marks a figure box containing the tb_komatsu.png image 
file with the caption (L-R): [kko, Mika, Hiroji, Genta, Suzuko. 


<figure> 
<img src="tb_komatsu.png" alt="family portrait" /> 
<figcaption>(L-R): Ikko, Mika, Hiroji, Genta, Suzuko</figcaption> 
</figure> 


While the figure element is used to contain an image file, it can also be used 
to mark any page content that you want to stand apart from the main content of an 
article. For instance, the £igure element could contain a text excerpt, as the following 
code demonstrates: 


<figure> 
<p>'Twas brillig, and the slithy toves<br /> 
Did gyre and gimble in the wabe;<br /> 
All mimsy were the borogoves,<br /> 
And the mome raths outgrabe.</p> 
<figcaption> 
<cite>Jabberwocky, Lewis Carroll, 1832-98</cite> 
</figcaption> 
</figure> 


Kevin plans on using figure boxes throughout the Tree and Book website to mark 
up family and individual photos along with descriptive captions. He’s created a set of 
sample pages for the Komatsu family that you will work on to learn about HTML and 
CSS visual elements and styles. Open the family’s home page and create a figure box 
displaying the family portrait along with a descriptive caption. 


To create a figure box: 


BD 1. Use your editor to open the th_komatsu_txt.html file from the html04 > tutorial 
folder. Enter your name and the date in the comment section of the file and 
save it as th_komatsu.html. 


For this web page, you'll work with a new style sheet named tb_visual1.css. 
Kevin has already created a reset style sheet and a typographical style sheet 
in the tb_reset.css and tb_styles1.css files respectively. 
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BD = 2. Within the document head, insert the following 1ink elements to link the 
page to the tb_reset.css, tb_styles1.css, and tb_visual1.css style sheet files. 


<link href="tb reset.css" rel="stylesheet" /> 
<link href="tb_ stylesl.css" rel="stylesheet" /> 
<link href="tb visuall.css" rel="stylesheet" /> 


DB 3. Scroll down to the article element and, directly after the h1 element, insert 
the following code for the figure box displaying the Komatsu family portrait. 
<figure> 

<img src="tb komatsu.png" alt="family portrait" /> 
<figcaption>(L-R): Ikko, Mika, Hiroji, 
Genta, Suzuko 
</figcaption> 
</figure> 


Figure 4—1 highlights the code for the family portrait figure box. 


Figure 4-1 Inserting a figure box 


reade 


image within 
the figure box 


The Komatsu Family 


<figure> 


F ae <img sree"tb_komatsu.png” alte"family portrait” /> 
caption associate —»><figcaption>(L-R): Ikko, Mika, Hiroji, Genta, Suzuko</figcaption> 
with the image </figure> 


heade 


BD 4. Take some time to review the content and structure of the rest of the document 
and then save your changes to the file. 


Format the appearance of the figure box by adding new style rules to the tb_visual1.css 
style sheet file. 


To format and view the figure box: 


BD 1. Use your editor to open the th_visual1_txt.css files from the htm|04 » tutorial 
folder. Enter your name and the date in the comment section of the file and 
save it as tb_visual1.css. 


D 2. Scroll down to the Figure Box Styles section at the bottom the document and 
insert the following style rule for the figure element: 
figure { 
margin: 20px auto Opx; 
width: 80%; 


} 


BD 3. Add the following style to format the appearance of the image within the 
figure box: 
figure img { 
display: block; 
width: 100%; 
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D 4. Finally, insert the following rule for the figure caption: 


figure figcaption { 
background-color: white; 
font-family: 'Palatino Linotype', Palatino, 
'Times New Roman', serif; 
font-style: italic; 
padding: 10px 0; 
text-align: center; 


} 
Figure 4-2 highlights the style rules for the figure box, image, and caption. 


Figure 4—2 Formatting the figure box and caption 


P 
figure box is 80% of the 

width of the header and 

(centered horizontally 


Za ; aay > 
figure image is displayed 
as a block with a width 
(equa! to the figure box 


(figure caption is centered | 
and displayed in a serif 
italic font on a white 

| background 


BD 5. Save your changes to the file and then open the tbh_komatsu.html file in 
your browser. Figure 4-3 shows the initial appearance of the page. 
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Initial design of the Komatsu family page 


The Komatsu Family 


— x 
Te 


Gents Komatsu was born in Hadanc, Japan in 


1946, the son of Goro Komatsu and Hisako Family Links 

(Sato). The family emigrated to San Francisco in 

1960. Genta became 2 U.S, citizen in 1968 and Family wee 

attended the University of San Francisco, eee 

receiving 38 Master's degree im Electrical Umeing , 

Engineering. In 1974 he met and married Mika post seep i Feri 

(Aoki), Gaughter of Yor! and Mane Aoki. Maka was 

2 registered nurse and worked at several! hospitals Gents (1946 - 2019) 

in tne Bay Area Silke (b. 1953) 
ikke (b. 4977) 

Gents passed away from pancreatic cancer in Suzuke (Endo) ib 1982) 

2019 and ts survived by his brother Michi, wife Hirofi fb. 2033) 


Mika, som Ikko, Gaugtiter-in-law Sutuko, and 
grandson Hircji. Miksa lives in retirement in 
Phoenx near her family and her energetic 
grandson. 


Source: Design Studio Pro; Source: Wikimedia Commons; © imtmphoto/Shutterstock.com 


With all of the content for the Komatsu Family page now added, you will start 
working on enhancing the page’s appearance, starting with the CSS background styles. 
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Choosing your Graphic File Format 


Graphic files on the web fall into two basic categories: vector images and bitmap 
images. A vector image is an image comprised of lines and curves that are based 
on mathematical functions. The great advantage of vector images is that they can be 
easily resized without losing their clarity and vector files tend to be compact in size. 
The most common vector format for the web is SVG (Scalable Vector Graphics), 
which is an XML markup language that can be created using a basic text editor and 
knowledge of the SVG language. 

A bitmap image is an image that is comprised of pixels in which every pixel is 
marked with a different color. Because a graphic file can be comprised of thousands of 
pixels, the file size of a bitmap image is considerably larger than the file size of a vector 
image. The most common bitmap formats on the web are GIF, JPEG, and PNG. 

GIF (Graphic Interchange Format) is the oldest standard with a palette limited to 
256 colors. GIF files, which tend to be large, have two advantages: first, GIFs support 
transparent colors and second, GIFs can be used to create animated images. Because 
GIFs have a limited color palette, they are unsuitable for photos. The most popular 
photo format is JPEG (Joint Photographic Experts Group), which supports a palette 
of over 16 million colors. JPEGs also support file compression, allowing a bitmap 
image to be stored at a smaller file size than would be possible with other bitmap 
formats. JPEGs do not support transparent colors or animations. 

The PNG (Portable Network Graphics) format was designed to replace GIFs with its 
support for several levels of transparent colors and palette of millions of colors. A PNG 
file can also be compressed, creating a file that is considerably smaller and, therefore, 
takes up considerably less space than its equivalent GIF file. PNG files also contain 
color correction information so that PNGs can be accurately rendered across a variety of 
display devices. 

In choosing a graphic format for your website, the most important consideration is 
often file size; you want to choose the smallest size that still gives you an acceptable 
image. This combination means that users will view a quality image but they will not 
have to wait for the graphic file to download. In addition to file size, you want to 
choose a format that supports a large color palette. For these reasons, most graphics 
on the web are now in either JPEG or PNG format, though GIFs are still often found on 
legacy sites. 


Exploring Background Styles 


Thus far, your design choices for backgrounds have been limited to color using either 
the RGB or HSL color models. CSS also supports the use of images for backgrounds 
through the following background- image style: 


background-image: url (url); 


where url specifies the name and location of the background image. For example, the 
following style rule uses the trees.png file as the background of the page body. 


body { 
background-image: url (trees.png) ; 
} 


This code assumes that the trees.png file is in the same folder as the style sheet; if the 
figure is not in the same folder, then you will have to include path information pointing 
to the folder location in which the image file resides. 
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Tiling a Background Image 


The default browser behavior is to place the background image at the top-left corner 
of the element and repeat the image in both the vertical and horizontal direction until 
the background is filled. This process is known as tiling because of its similarity to the 
process of filling up a floor or other surface with tiles. 

You can specify the type of tiling to be applied to the background image, or even 
turn off tiling, by applying the following background-repeat style: 


background-repeat: type; 


where type is repeat (the default), repeat-x, repeat-y, no-repeat, round, or 
space. Figure 4—4 displays the effect of each background-repeat type. 


Figure 4—4 Examples of background-repeat types 
background-repeat: repeat; background-repeat: repeat-x; background-repeat: repeat-y; 
image is tiled both image is tiled horizontally image is tiled vertically 


horizontally and vertically 


background-repeat: no-repeat; background-repeat: round; background-repeat: space; 


image is not tiled background image is tiled and background image is 
resized to fit in the container a tiled and spaces added to fit 
whole number of times in the container a whole 


number of times 
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Adding a Background Image 
¢ To add an image to the background, use the CSS style 
background-image: url (url); 


where url specifies the name and location of the background image. 
° To specify how the image should be tiled, use 


REFERENCE 


background-repeat: type; 


where type is repeat (the default), repeat-x, repeat-y, no-repeat, round, or space. 


Kevin has supplied you with an image file, to_back1.png to fill the background of the 
browser window. Use the default option for tiling so that the image is displayed starting 
from the top-left corner of the window and repeating until the entire window is filled. 


To add a background image to the browser window: 
BD 1. Return to the tb_visual1.css file in your editor. 


BD 2. Go to the HTML Styles section and add the following style rule to change the 
background of the browser window: 


html { 
background-image: url(tb back1l.png) ; 
} 


Note that because you are using the default setting for tiling the 
background image, you do not need to include the background-repeat 
style rule. Figure 4-5 highlights the new style rule. 


tiles the tb_back1.png 
image file across the html { 

browser window background-image: url(tb_back1. png); 
background } 


BD 3. Save your changes to the file and then reload tb_komatsu.html in your 
browser. Figure 4-6 shows the tiled background in the browser window. 
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Figure 4-6 Tiled background image in the browser window 


tiled image in 
browser window 
background 


7 


e Komatsu Family 


=a  E "ttt 


(ees . on 


Source: Design Studio Pro; Source: Wikimedia 
Commons; © imtmphoto/Shutterstock.com 


page body 


Note that the page body covers part of the tiled images in the browser window. 
However, even though the background images are hidden, the tiling still continues 
behind the page body. 


Attaching the Background Image 


A background image is attached to its element so that as you scroll through the element 
content, the background image scrolls with it. You can change the attachment using the 
following background-attachment property 


background-attachment: type; 


where type is scroll (the default), fixed, or local. The scroll type sets the background 
to scroll with the element content. The fixed type creates a background that stays in place 
even as the element content is scrolled horizontally or vertically. Fixed backgrounds are 
sometimes used to create watermarks, which are translucent graphics displayed behind the 
content with a message that the content material is copyrighted or in draft form or some 
other message directed to the reader. The local type is similar to scro11 except that it is 
used for elements, such as scroll boxes, to allow the element background to scroll along 
with the content within the box. 


Setting the Background Image Position 


By default, browsers place the background image in the element's top-left corner. 
You can place the background image at a different position using the following 
background-position property: 


background-position: horizontal vertical; 


where horizontal and vertical provide the coordinates of the image within 
seevers unaicneeainaiee the element background expressed using one of the CSS units of measure or as a 
Areuneaeliad omaha percentage of the element's width and height. For example, the following style places 
top-left corner of the the image 10% of the width of the element from the left edge of the background and 


background to the top-left 20% of the element's height from the background’s top edge. 
corner of the image. 


2 


background-position: 10% 20%; 
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If you specify a single value, the browser applies that value to both the horizontal 
and vertical position. Thus, the following style places the background image 30 pixels 
from the element's left edge and 30 pixels down from the top edge. 


background-position: 30px; 


You can also place the background image using the keywords left, center, and 
right for the horizontal position and top, center, and bottom for the vertical position. 
The following style places the background image in the bottom-right corner of the element. 


background-position: right bottom; 


Typically, the background-position property is only useful for non-tiled images 
because, if the image is tiled, the tiled image fills the background and it usually doesn’t 
matter where the tiling starts. 


Defining the Extent of the Background 


You learned in Tutorial 2 that every block element follows the Box Model in which the 
element content is surrounded by a padding space and beyond that a border space 
(see Figure 2-38). However, the element's background is defined, by default, to extend 
only through the padding space and not to include the border space. You can change 
this definition using the following background-clip property: 


background-clip: type; 


TRY. IT where type is content -box (to extend the background only through the element 


You can explore the 
impact of different CSS 
background styles using 
the demo_background. 
html file in the html04 » 
demo folder. 


content), padding-box (to extend the background through the padding space), or 
border -box (to extend the background through the border space). For example, the 
following style rule defines the background for the page body to extend only as far as 
the page content. The padding and border spaces would not be considered part of the 
background and thus would not show any background image. 


body { 
background-clip: content -box; 
} 


Because the background extends through the padding space by default, all 
coordinates for the background image position are measured from the top-left corner 
of that padding space. You can choose a different context by applying the following 
background-origin property: 


background-origin: type; 


where type is once again content -box, padding-box, or border-box. Thus, the 
following style rule places the background image at the bottom-left corner of the page body 
content and not the bottom-left corner of the padding space (which would be the default). 


body { 
background-position: left bottom; 
background-origin: content-box; 


} 


Based on this style rule, the padding space of page body would not have any background 
image or color, other than what would be defined for the browser window itself. 
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Sizing and Clipping an Image 


The size of the background image is equal to the size stored in the image file. To specify 
a different size, apply the following background-size property: 


background-size: 


width height; 


where width and height are the width and height of the image in one of the CSS units 
of length or as a percentage of the element's width and height. The following style sets 
the size of the background image to 300 pixels wide by 200 pixels high. 


background-size: 


300px 200px; 


CSS also supports the sizing keywords auto, cover, and contain. The auto keyword 
tells the browser to automatically set the width or height value based on the dimensions 
of the original image. The following style sets the height of the image to 200 pixels and 
automatically scales the width to keep the original proportions of the image: 


background-size: 


auto 200px; 


The cover keyword tells the browser to resize the image to cover all of the element 


If you specify only one size 


background while still retaining the image proportions. Depending on the size of 


value, the browser applies the element, this could result in some of the background image being cropped. The 
it to the image width contain keyword scales the image so that it’s completely contained within the element, 
clntelisecT SSM cHe| even if that means that not all of the element background is covered. Figure 4-7 displays 


proportionally. 


examples of a background set to a specific size, as well as resized to either cover the 


background or to have the image completely contained within the background. 


background-size: 200px 300px; background-size: cover; 
| 300px 
—— ——_—_ 
200px 
A 
image is scaled at the specified image is resized to fill the 
dimensions background, but part of the 
image is cropped 


background-size: contain; 


image is resized so that it is 
contained within the element, 
but part of the background is 
left uncovered 


Source: Wikimedia Commons 
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Setting Background Image Options 
¢ To specify how the image is attached to the background, use 
background-attachment: type; 


where type is scroll (the default), fixed, or local. 
¢ To set the position of the background image, use 


background-position: horizontal vertical; 


where horizontal and vertical provide the coordinates of the image within the 
element background. 
¢ To define the extent of the background, use 


background-clip: type; 


where type is content -box, padding-box (the default), or border-box. 
° To define how position coordinates are measured, use 


background-origin: type; 


where type is content -box, padding-box (the default), or border-box. 


The background Property 
All of these different background options can be organized in the following background 
property: 


background: color url(url) position / size repeat attachment 
origin clip; 


TRY.IT where color is the background color, uri is the source of the background image, 


You can explore the CSS 
background style using the 
demo_background2.html 
file in the html04 » demo 
folder. 


position is the image’s position, size sets the image size, repeat sets the tiling of 
the image, attachment specifies whether the image scrolls with the content or is fixed, 
origin defines how positions are measured on the background, and clip specifies the 
extent over which the background is spread. For example, the following style rule sets 
the background color to ivory and then uses the draft.png file as the background image 
fixed at the horizontal and vertical center of the page body and sized at 10% of the 
body’s width and height: 


body { 
background: ivory url (draft.png) 
center center / 10% 10% 
no-repeat fixed content-box content-box; 


} 


The rest of the property sets the image not to repeat and to use the content box for 
defining the background origin and clipping. Note that the page body will have an ivory 
background color at any location where the draft.png image is not displayed. If you 
don’t specify all of the option values, the browser will assume the default values for the 
missing options. Thus, the following style rule places the draft.png at the horizontal and 
vertical center of the page body without tiling: 


body { 
background: ivory url(draft.png) center center no-repeat; 
} 
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Since no size, attachment, origin, and clip values are specified, the size of the 
tHieibackeround’eropenty, image will be based on the dimensions from the image file, the image will scroll with 
ieliidleeitietiakebaricter the body content, and the background origin and clipping will extend through the page 
only when you need body's padding space. 
to separate the image Kevin wants you to include a semi-transparent image of the family patriarch, Genta 
postion value temas Komatsu, as a background image placed in the lower-right corner of the article on the 
PES ae dared Komatsu family. Add a style rule to the tb_visual1.css file to display the tb_back2.png 

image within that element without tiling. 


To add a background image to the page article: 


BD 1. Return to the tb_visual1.css file in your editor and scroll down to the Article 
Styles section. 


BD 2. Add the following style rule: 


article { 
background: url(tb back2.png) bottom right / 15% 
no-repeat content-box; 


} 
Figure 4-8 highlights the style rule applied to the page article. 


Adding a background to the page article 


places the image at 
the lower-right corner 


does not tile the image 


articl { 
background: url (tb_back2.png) ‘bottom right ‘/ 15% no-repeat content-box} 
t 


image file sets the width of the positions the image 
image to 15% of the with respect to the 
article width article content 


BD 3. Save your changes and then reload tb_komatsu.html in your browser. 
Figure 4-9 shows the placement of the background image. 


Figure 4-9 Placement of the background image 


5 registered nurse and worked at severe! hospitals Gaeta [5936 - 2019) 
in the Bay Area Mika (b. 1953) 
Mkko (>. 1977) 
Gema passed away from pancreatic cancer in Sutuko (Endo) (>. 1983) 
2019 and ts survived by his brother Michi, wife Hiroa (R. 2033) al 
Mika, son Ikko, daughter-in-law Suzuko, and - 

z grandson Hiroji, Mika lives in retirement in ~~ 
background image placed Phoenix near her family and her energetic ne! 
in lower-right corner of the andson 
article content with no tiling 


Source: Wikimedia Commons; © imtmphoto/Shutterstock.com 


Kevin likes the addition of the image of Genta Komatsu and would like you to add 
another background image showing the family matriarch, Mika Komatsu, and a third 
image giving the article a paper-textured background. 
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Always list the background 
color last so that it provides 
the foundation for your 
background images. 


Adding Multiple Backgrounds 


To add multiple backgrounds to the same element, you list the backgrounds in the 
following comma-separated list: 


background: background1, background2, ...; 


where background1, background2, and so on are the properties for each background. 
For example the following style rule applies three different backgrounds to the header 
element: 


header { 
background: url (back2.png) top left no-repeat, 
url (backl.png) bottom right no-repeat, 
rgb(191, 191, 191); 


} 


Backgrounds are added in the reverse order in which they're listed in the style rule. In 
this style rule, the background color is applied first, the back1.png background image 
is placed on top of that, and finally the back2.png background image is placed on top 
of those two backgrounds. 

Individual background properties can also contain multiple options placed in a 
comma-separated list. The following style rule creates the same multiple backgrounds 
for the header element without using the background property: 


header { 
background-image: url(back2.png), url(backl.png) ; 
background-position: top left, bottom right; 
background-repeat: no-repeat; 
background-color: rgb(191, 191, 191); 


} 


Note that if a background style is listed once, it is applied across all of the backgrounds. 
Thus the background-color and the background-repeat properties are used in all 
the backgrounds. 

Revise the style rule for the article element to add two more backgrounds. 


To add a background image to the page article: 


BD 1. Return to the tb_visual1.css file in your editor and return to the Article Styles 
section. 


D 3. Be sure the insertion point is before the semicolon (;), then add the following 
code to display two more background images followed by a background 
color: 
url(tb back3.png) bottom left / 15% no-repeat content-box, 
url(tb back4.png) 100%/cover no-repeat, 
rgb(211, 211, 211) 


The background color acts as a fallback design element and will not be 
displayed except for browsers that are incapable of displaying background 
images. Figure 4-10 displays the code for the multiple backgrounds applied 
to the page article. 
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Adding multiple background images 


* Article Styles */ commas used to separate one 
— background from the next 


places the second background 
image at the lower-left corner of 
the article content with no tiling 
and a width of 15% 


no-repeat content-box, 


places the third background 
image, scaled to cover all of the 
padding box of the article 
without repeating 


uses a gray color as the background 
if the browser doesn’t support 
background images 


Trouble? Be sure your code matches the code in Figure 4-10, including 
the commas used to separate the components in the list and the ending 
semicolon. 


BD 4. Save your changes and then reload tb_komatsu.html in your browser. 
Figure 4-11 shows the three background images displayed with the article. 


Revised background for the page article 


tb_back4.png 


(LY Rie. Maha Het Gewa Saree 


tb_back3.png 


tb_back2.png 


Source: Wikimedia Commons; © imtmphoto/Shutterstock.com 


Kevin is pleased with the revised backgrounds for the browser window and the page 
article. Next, you will explore how to work with CSS border properties. 
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INSIGHT 


TRY_IT 


To explore the impact of 
the background-blend- 
mode style on multiple 
backgrounds, open the 
demo_blend.html file in 
the html04 » demo folder. 


Blending Backgrounds 


Multiple backgrounds are stacked on top of each other, with the first background listed 
in the code placed on top of subsequent backgrounds. By default, the backgrounds on 
the top of the stack will obscure the lower-ordered backgrounds unless there is gap or 
a transparent color that allows the backgrounds at the bottom of the stack to appear. 
Thus, each background acts as its own background layer, separate in appearance from 
other backgrounds. 

To combine multiple backgrounds into a single background, use the following 
background-blend-mode style: 


background-blend-mode: type; 


where type defines the method by which the backgrounds are combined. Possible 
type values include: 


® normal backgrounds are stacked (the default) 

° multiply background colors are multiplied, leading to a darker image 
combined of several colors 

° overlay background colors are mixed to reflect the lightness and darkness of 
the colors 

° darken backgrounds are replaced with the darkest of background colors 

e lighten backgrounds are replaced with the lightest of the background colors 


Several other type options are also available. You can specify a comma-separated list 
of blend values, so that each background layer is blended in a different way with all the 
other backgrounds. 


Working with Borders 


So far, you have only worked with the content, padding, and margin spaces from the 

CSS Box model. Now, you will examine the border space that separates the element's 
content and padding from its margins and essentially marks the extent of the element 
as it is rendered on the page. 


Setting Border Width and Color 


CSS supports several style properties that are used to format the border around each 
element. As with the margin and padding styles, you can apply a style to the top, right, 
bottom, or left border, or to all borders at once. To define the thickness of a specific 
border, use the property 


border-side-width: width; 


where side is either top, right, bottom, or left and width is the width of the 
border in one of the CSS units of measure. For example, the following style sets the 
width of the bottom border to 10 pixels. 


border-bottom-width: 10px; 


Border widths also can be expressed using the keywords thin, medium, or thick; 
the exact application of these keywords depends on the browser. You can define the 
border widths for all sides at once using the border-width property 


border-width: top right bottom left; 


where top, right, bottom, and left are the widths of the matching border. As with 
the margin and padding properties, if you enter one value, it’s applied to all four 
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borders; two values set the width of the top/bottom and left/right borders, respectively; 
and three values are applied to the top, left/right, and bottom borders, in that order. 
Thus, the following property sets the widths of the top/bottom borders to 10 pixels and 
the left/right borders to 20 pixels: 


border-width: 10px 20px; 
The color of each individual border is set using the property 
border-side-color: color; 


where side once again specifies the border side and color is a color name, color 
value, or the keyword transparent to create an invisible border. The color of the four 
sides can be specified using the following border-color property 


border-color: top right bottom left; 


where top right bottom left specifies the side to which the color should be 
applied. Thus, the following style uses gray for the top and left borders and black for the 
right and bottom borders: 


border-color: gray black black gray; 


If no border color is specified, the border will use the text color assigned to the element. 


Setting the Border Design 
CSS allows you to further define the appearance of borders using the following border styles: 
border-side-style: style; 


where side once again indicates the border side and style specifies one of the nine 
border styles displayed in Figure 4-12. 


Figure 4-12 Examples of border styles 


joccccce 1 prtensnennnsneseessssnaseennng 
I l 
I I 
I I 
I I 
I I 
I I 
solid dashed dotted 
double outset inset 
groove ridge none 


Or to specify styles for all four borders use the property: 


border-style: top right bottom left; 
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As with the other border rules, you can modify the style of all borders or combinations 
of the borders. For example, the following style uses a double line for the top/bottom 
borders and a single solid line for the left/right borders. 


border-style: double solid; 


All of the border styles discussed above can be combined into the following 
property that formats the width, style, and color of all of the borders 


border: width style color; 


TRY. IT where width is the thickness of the border, sty1e is the style of the border, and color 


You can explore the CSS 
border style using the 
demo_border.html file in 
the html04 » demo folder. 


REFERENCE 


is the border color. The following style rule inserts a 2-pixel-wide solid blue border 
around every side of each h1 heading in the document: 


hi {border: 2px solid blue; } 
To modify the width, style, and color of a single border, use the property 
border-side: width style color; 


where side is either top, right, bottom, or left. 


Adding a Border 
¢ To add a border around every side of an element, use the CSS property 
border: width style color; 


where width is the width of the border, style is the design style, and color is the 
border color. 
¢ To apply a border to a specific side, use 


border-side: width style color; 


where side is top, right, bottom, or left for the top, right, bottom, and left borders. 
¢ To set the width, style, or color of a specific side, use the properties 


border-side-width: width; 
border-side-style: style; 
border-side-color: color; 


Kevin wants the page body to stand out better against the tiled images used as the 
background for the browser window. He suggests you add solid borders to the left 
and right edges of the page body and that you add a double border around the aside 
element containing links to other Komatsu family pages. 


To add borders to the page elements: 


BD 1. Return to the tb_visual1.css file in your editor and go to the Page Body 
Styles section. 


D 2. Add the following style rule for the page body: 


body { 
border-left: 1px solid rgb(51, 51, 51); 
border-right: lpx solid rgb(51, 51, 51); 
} 


BD 3. Go to the Aside Styles section and add the following style rule for the aside 
element: 


aside { 
border: 4px double rgb(45, 93, 62); 
} 
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Figure 4-13 highlights the style rules that create borders for the page body 
and aside element. 


Adding borders to the page body and aside element 


adds a 1-pixel solid 
gray border to the 


left and right edges 
of the page body 


adds a 4-pixel double 
medium green border 
to the aside element 


BD 4. Save your changes to the file and then reload tb_komatsu.html in your 
browser. Figure 4-14 shows the appearance of the page with the newly 
added borders. Note that the background color and other styles associated 
with the aside element are in the tb_styles1.css file. 


Page design with border 


Ry 
right page |) 
| ght pag 
border 7 


Sat f be 
double border around 
the aside element 


Source: Wikimedia Commons; © imtmphoto/Shutterstock.com 


Kevin is concerned that the design of the page is too boxy and he wants you to 
soften the design by adding curves to some of the page elements. You can create this 
effect using rounded corners. 


Creating Rounded Corners 


To round off any of the four corners of a border, apply the following border-radius 
property: 
border-radius: top-left top-right bottom-right bottom-left; 


where top-left, top-right, bottom-right, and bottom-left are the radii of 
the individual corners. The radii are equal to the radii of hypothetical circles placed 
at the corners of the box with the arcs of the circles defining the rounded corners 
(see Figure 4-15). 
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Figure 4-15 Setting rounded corners based on corner radii 


border-radius: 20px 60px 100px 140px; 


ST \Aaeem | you enter only one radius value, it is applied to all four corners; if you enter two 
values, the first is applied to the top-left and bottom-right corners, and the second is 


Y | he CSS i : a a 
cpap en eben de applied to the top-right and bottom-left corners. If you specify three radii, they are 


border-radius style using 


dhe dame_cadtue hiv applied to the top-left, top-right/bottom-left, and bottom-right corners, in that order. 
file in the html04 » demo For example, the following style rule creates rounded corners for the aside element in 
folder. which the radii of the top-left and bottom-right corners is 50 pixels and the radii of the 


top-right and bottom-left corners is 20 pixels. 
aside {border-radius: 50px 20px;} 
To set the curvature for only one corner, use the property: 
border-corner-radius: radius; 


where corner is either top-left, top-right, bottom-right, or bottom-left. 


Creating a Rounded Corner 
e To create rounded corners for an element border, use 
border-radius: top-left top-right bottom-right bottom-left; 


where radius is the radius of the rounded corner in one of the CSS units of 
measurement and top-left, top-right, bottom-right, and bottom-left are the 
radii of the individual corners. 


REFERENCE 
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The corners do not need to be circular. Elongated or elliptical corners are created by 
specifying the ratio of the horizontal radius to the vertical radius using the style: 


border-radius: horizontal/vertical; 


where horizontal is the horizontal radius of the corner and vertical is the vertical 
radius of the same corner (see Figure 4-16). 


Figure 4-16 Creating an elongated corner 


border-radius: 150px/80px; 


Thus, the following style rule creates elongated corners in which the ratio of the 
horizontal to vertical radius is 50 pixels to 20 pixels. 


border-radius: 50px/20px; 


Note that using percentages for the radius value can result in elongated corners if 
sare ene the element is not perfectly square. The following style rule sets the horizontal radius to 
use a square element with 15% of element width and 15% of the element height. If the element is twice as wide 


an equal width and height as it is high for example, the corners will not be rounded but elongated. 
and the corner radii set 


to 50%. border-radius: 15%; 
When applied to a single corner, the format to create an elongated corner is slightly 
different. You remove the slash between the horizontal and vertical values and use the 
following syntax: 


border-corner-radius: horizontal vertical; 


For example, the following style creates an elongated bottom-left corner with a 
horizontal radius of 50 pixels and a vertical radius of 20 pixels. 


border-bottom-left-radius: 50px 20px; 


PT \ Agee Rounded and elongated corners do not clip element content. If the content of the 
element extends into the corner, it will still be displayed as part of the background. 
You can explore how to 


ane lhe cance Because this is often unsightly, you should avoid heavily rounded or elongated corners 
using the demo_ellipse. unless you can be sure they will not obscure or distract from the element content. 


html file in the html04 » Add rounded corners with a radius of 30 pixels to the aside element. 
demo folder. 
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To add rounded corners to an element: 
BD 1. Return to the th_visual1.css file in your editor and go to the Aside Styles section. 
BD 2. Add the following style to the style rule for the aside element: 


border-radius: 30px; 


Figure 4-17 highlights the style to create the rounded corners for the aside 
border. 


Figure 4-17 Adding rounded corners to the aside element border 


sets the radius at each x double rgb(45, 93, 62); 


border corner to 30 pixels 


BD 3. Save your changes to the file and reload tb_komatsu.html in your browser. 
Figure 4-18 shows the rounded corners for the aside element border. 


Figure 4-18 Aside element border with rounded corners 


rounded corner 


© imtmphoto/Shutterstock.com 


Kevin likes the revision to the border for the aside element. He also wants you to 
add a border to the family portrait on the Komatsu Family page. However, rather than 
using one of the styles shown in Figure 4-12, Kevin wants you to use a graphic border 
that makes it appear as if the figure box came from a torn piece of paper. You can 
create this effect using border images. 
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Applying a Border Image 


A border image is a border that it is based on a graphic image. The graphic image is sliced 
into nine sections representing the four corners, the four sides, and the interior piece. The 
interior piece is discarded because that is where the content of the object will appear; the 
four corners become the corners of the border and the four sides are either stretched or 
tiled to fill in the border’s top, right, bottom, and left sides. Figure 4-19 shows an example 
of an image file, frame.png, sliced into nine sections to create a border image. 


Figure 4-19 Slicing a graphic image to create a border 


slices are stretched to 
match the image border 


border slices 


© imtmphoto/Shutterstock.com 


To apply a border image, use the following property 
border-image: url(url) slice repeat fill; 


where url is the source of the graphic image, slice is the width or height of the slices 
used to create the sides and corners, repeat indicates whether the side slices should 
be stretched or tiled to cover the border’s four sides, and £111 is an optional attribute 
that fills the image background with the graphic image file. The repeat option supports 
the following values: 


¢ stretch: The slices are stretched to fill each side. 

e repeat: Theslices are tiled to fill each side. 

e@ round: _ Theslices are tiled to fill each side; if they don’t fill the sides with an integer 
number of tiles, the slices are rescaled until they do. 

* space: _ Theslices are tiled to fill each side; if they don’t fill the sides with an integer 
number of tiles, extra space is distributed around the tiles. 


For example, the following style cuts 10-pixel-wide slices from the frame.png image file 
with the four side slices stretched to cover the length of the four sides of the object's border: 


border-image: url(frame.png) 10 stretch; 
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The size of the slices is measured either in pixels or as a percentage of the image file 
width and height. A quirk of this property is that you should not specify the pixel unit if 
you want the slices measured in pixels but you must include the % symbol when slices 
are measured in percentages. 

You can create slices of different widths or heights by entering the size values in a 
space-separated list. For instance, the following style slices the graphic image 5 pixels 
on the top, 10 pixels on the right, 15 pixels on the bottom, and 25 pixels on the left: 


border-image: url(frame.png) 5 10 15 25 stretch; 


TRY.IT The slice sizes follow the same top/right/bottom/left syntax used with all of the CSS 


border styles. Thus, the following style slices 5% from the top and bottom sides of the 
graphic image, and 10% from the left and right sides: 


You can explore how to 

create a border image 

using the demo_frame. 

html file in the html04 > 

demo folder. You can also apply different repeat values to different sides of the border. For 
example, the following style stretches the border slices on the top and bottom but tiles 
the left and right slices: 


border-image: url(frame.png) 5% 10% stretch; 


border-image: url(frame.png) 10 stretch repeat; 


Creating a Graphic Border 
¢ To create a border based on a graphic image, use 
border-image: url(url) slice repeat fill; 


where url is the source of the border image file, slice is the size of the border 
image cut off to create the borders, repeat indicates whether the side borders 
should be either stretched or tiled to cover the object's four sides, and £111 is an 
optional attribute that fills the image background with the graphic image file. 


REFERENCE 


The torn paper image that Kevin wants to use is based on the graphic image file 
tp_border.png file. Use the border- image property to add a border image around the 
figure box on the Komatsu Family page, tiling the border slices to fill the sides. Note that 
in order for the border image to appear you must include values for the border-width 
and border-style properties. 


To create a graphic border: 


DB 1. Return to the tb_visual1.ess file in your editor and scroll to the Figure Box 
Styles at the top of the file. 


BD 2. Add the following style to the style rule for the figure box: 


border-style: solid; 
border-width: 25px; 
border-image: url(tb border.png) 50 repeat; 


Figure 4-20 displays the styles used to create the graphic border. 
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Adding border ag 


border width and f ' uses the 

style values are ceiths Se tb_border.png file 
required for the Nridke dines eee A cesard for the graphical 
border image margins 26px inxs border 


slices 50 pixels ) tiles the side 
from each side of slices to fill the 
the border image border sides 


BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-21 
shows the appearance of the border image. 


Figure 4-21 Figure box with border image 


graphic image 
slices are tiled to fill 
the border sides 


(L-R): Ikko, Mika, Hiroji. Genta; Suzuko border image 
created from the 
tb_border.png file 


© imtmphoto/Shutterstock.com 


Kevin appreciates the effect you created, making it appear as if the family portrait 
was torn from an album and laid on top of the web page. 
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», Problem Solving: Graphic Design and Legacy Browsers 


Adding snazzy graphics to your page can be fun, but you must keep in mind that 

the fundamental test of your design is not how cool it looks but how usable it is. Any 
design you create needs to be compatible across several browser versions if you want 
to reach the widest user base. To support older browsers, your style sheet should use 
progressive enhancement in which the older properties are listed first, followed by 
browser extensions, and then by the most current CSS properties. As each property 
supersedes the previous properties, the browser will end up using the most current 
property that it supports. 

For example, the following style rule starts with a basic 5-pixel blue border that 
will be recognized by every browser. It is followed by browser extensions for Opera, 
Mozilla, and WebKit to support older browsers that predate adoption of the CSS 
border - image property. Finally, the style list ends with the CSS border- image 
property, recognized by every current browser. In this way, every browser that opens the 
page will show some type of border. 


PROSKILLS 


border: 5px solid blue; 

-o-border-image: url(paper.png) 30 repeat; 
-moz-border-image: url(paper.png) 30 repeat; 
-webkit-border-image: url(paper.png) 30 repeat; 
border-image: url(paper.png) 30 repeat; 


Be aware, however, that the syntax for an extension may not match the syntax for 
the final CSS specification. For example, the following list of styles creates a rounded 
top-right corner that is compatible across a wide range of browser versions: 


-moz-border-radius-top-right: 15px; 
-webkit-border-top-right-radius: 15px; 
border-top-right-radius: 15px; 


Note that the syntax for the Mozilla extension does not match the syntax for the 
WebKit extension or for the final CSS specification. As always, you need to do your 
homework to learn exactly how different browser versions handle these CSS design styles. 


In the next session, you'll continue to work with the CSS graphic styles to add 
three-dimensional effects through the use of drop shadows and color gradients. If you 
want to take a break, you can close your open files and documents now. 
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REVIEW 


Session 4.1 Quick Check 


1. The element to create a figure caption is: 
a. caption 
b. figurecap 
c. figcaption 
d. alt 
2. Lines and curves based on mathematical functions comprise a: 
a. bitmap image 
b. png image 
c. figure image 
d. vector image 
3. To tile a background image in the horizontal direction only, use: 
a. repeat-x 
b. repeat-y 
Cc. repeat-horizontal 
d. repeat-h 
4. To display the background image only within a content box, apply the style: 
a. background-origin: content-box; 
b. background: content -box; 
Cc. background-display: content-box; 
d. background-clip: content -box; 
5. To create a 5-pixel wide brown border with a dotted line, apply the style: 
a. border-style: 5px brown dotted; 
b. border-type: brown 5px dotted; 
C. border-outline: dotted brown 5px; 
d. border: 5px brown dotted; 
6. To use rounded corners with a radius of 15 pixels in a border, apply the style: 
a. border-width: 15px; 
b. border-radius: 15px; 
C. border-arc: 15px; 
d. corner-radius: 15px; 
7. To create an elongated corner with a horizontal radius of 10 pixels and a 
vertical radius of 5 pixels, use: 
a. border-radius: 10px 5px; 
b. border-radius: 5px 10px; 


C. border-radius: 10px/5px; 
d. border-radius: 5px/10px; 
8. To create a border image using the border.png file with a slice size of 30 pixels 
and the slices stretched along the borders, use: 
a. border-image: url(border.png) 30 stretch; 
b. border: url (border.png) 30 stretch; 
C. border-img: url(border.png) 30 stretch; 
d. border-slice: url (border.png) 30 stretch; 
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Session 4.2 Visual Overview: 
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Shadows and Gradients 


This shows the 
figure box is 
displayed as 
55% opaque. 


This shows a 
box shadow on 
the left edge of 
the page body. 


This shows a box 
shadow inside 
the page article. 


There is a box shadow on 
the right edge of the 
page body. 


The heading 
text has a 
text shadow. 


The box shadow creates 
a halo around the aside 
element. 


The radial gradient 

proceeds from white in the 
center to medium green on 
the edges. 


The linear gradient proceeds 
at an angle of 15° 
counter-clockwise from light 
green to dark green. 


Source: Design Studio Pro; Source: Wikimedia Commons; imtmphoto/Shutterstock.com 
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Creating Drop Shadows 


In this session, you will examine some design styles that create 3D effects, making the 
page content appear to jump out of the browser window. The first styles you'll explore 
are used to create drop shadows around text strings and element boxes. 


Creating a Text Shadow 


To give the text on your page visual impact, you can use CSS to add a shadow using 
the following text -shadow property 


text-shadow: color offsetX offsetY blur; 


where color is the shadow color, offsetX and offset yY are the distances of the 
shadow from the text in the horizontal and vertical directions, and blur defines the 
amount by which the shadow spreads out, creating a blurred effect. The shadow offset 
values are expressed so that positive values push the shadow to the right and down 
while negative values move the shadow to the left and up. The default blur value is 0, 
creating a shadow with distinct hard edges; as the blur value increases, the edge of the 
shadow becomes less distinct and blends more in the text background. 

The following style creates a red text shadow that is 10 pixels to the right and 5 pixels 
down from the text with blur of 8 pixels: 


text-shadow: red 10px 5px 8px; 


Multiple shadows can be added to text by including each shadow definition in the 
following comma-separated list. 


text-shadow: shadowl, shadow2, shadow3, ...; 


where shadow1, shadow2, shadow3, and so on are shadows applied to the text with 
the first shadow listed displayed on top of subsequent shadows when they overlap. The 
following style rule creates two shadows with the first red shadow placed 10 pixels to 
the left and 5 pixels up from the text and the second gray shadow is placed 3 pixels to 
the right and 4 pixels down from the text. Both shadows have a blur of 6 pixels: 


text-shadow: red -10px -5px 6px, 
gray 3px 4px 6px; 


TRY. IT Figure 4-22 shows examples of how the text - shadow style can be used to achieve a 


eae a variety of text designs involving single and multiple shadows. 


text-shadow style and 
creating multiple text 
shadows by using the 
demo_text.html file from 
the html04 » demo folder. 
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Figure 4-22 Examples of text shadows 


TREE Book 


text-shadow: gray 4px 6px 5px; — color: rgb(150, 187, 60); color: white; 
text-shadow: black -4px -3px 5px; _ text-shadow: black Opx Opx 1px; 


color: white; color: white; background-color: 
text-shadow: green Opx Opx 25px; text-shadow: black Opx Opx 3px, — rgb(110, 137, 20); 
green 4px 4px 4px, color: rgb(90, 127, 0); 
blue Opx Opx 55px; —_ text-shadow: black 1px 1px 1px, 
white Opx -2px Opx; 


Creating a Text Shadow 
¢ To add a shadow to a text string, use the property 
text-shadow: color offsetX offsetY blur; 


where color is the shadow color, offset X and offset Y are the distances of the 
shadow from the text in the horizontal and vertical directions, and blur defines the 
amount by which the shadow is stretched. 


REFERENCE 


Kevin wants you to add two text shadows to the h1 heading The Komatsu Family. 
The first text shadow will be a light-green highlight with hard edges and the second 
shadow will be semi-transparent gray and blurred. 


To add a text shadow: 


BD 1. If you took a break after the previous session, reopen or return to the 
tb_visual1.css file in your editor and scroll to the Article Styles section. 


BD 2. Add the following style for the h1 heading in the article header: 


article header hi { 
text-shadow: rgb(181, 211, 181) 2px 2px l1px, 
geo (AaL, Ail, Bail, WoGG)) Brepis Brepe Alyepep 


} 
Figure 4-23 highlights the style to add text shadows to the h1 heading. 


MEY ~=HTML 5 and CSS | Tutorial 4 Graphic Design with CSS 


Adding text shadows 


background: url(tb_back2.png) bottom right / 1 no-repeat content-box, 


url (tb _back3.png) bottom left / 1 no-repeat content-box, 
url (tb back4.png) 1 /cover no-repeat, a 
rgb(211, 211, 211); light green text 


shadow with hard 
edges 


article header t | ees 

- text-shadow 2px 2px ApK, semi-transparent 
: 21, —_—— gray shadow 
with soft edges 


BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-24 
shows the shadow effect added to the h1 heading. 


Figure 4-24 Article heading with text shadows 


soft gray background ; : 
shadow = bs ‘| light green 


highlight shadow 


Kevin likes the shadow effect and the use of the light green shadow, which appears to give 
a highlight to the heading text. Next, he wants you to add shadows to other page objects. 


Creating a Box Shadow 


Shadows can be added to any block element in the web page by using the box-shadow 
property 
box-shadow: color offsetX offsetY blur; 


where color, offsetX, offsety, and blur have the same meanings for box shadows 
as they do for text shadows. As with text shadows, you can add multiple shadows by 


If no shadow color is ; : : : : 
including them in the following comma-separated list 


provided, the browser uses 


black as the default color. box-shadow: shadowl, shadow2 ...; 


where once again the first shadow listed is displayed on top of subsequent shadows. 

In the last session, you used left and right borders to set off the page body from the 
browser window background. Kevin would like you to increase this visual distinction 
by adding drop shadows to the left and right sides of the page body. 
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To add a box shadow: 


BD 1. Return to the tb_visual1.css file in your editor and go to the Page Body 
Styles section. 


D 2. Within the style rule for the body element, insert the following styles: 


box-shadow: rgb(51, 51, 51) 15px Opx 25px, 
raefoy((Sil, al, Sal) sulbyepe (hepe Asjopige 


Figure 4-25 highlights the style to add box shadows to the page body. 


drop shadow on the body { 
page body's right edge ; eft: ; lid 


drop shadow on the 
page body's left edge 


gray shadow color 


BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-26 
shows the drop shadows added to the page body. 


drop shadow on 
the left edge 


The Komatsu Family 


drop shadow on 
the right edge 
me ad tT 


Source: Design Studio Pro; Source: Wikimedia Commons; © = Sy 


Box shadows can be placed inside the element as well as outside. By adding an 
interior shadow you can create the illusion of a beveled edge in which the object appears 


to rise out of its background. To create an interior shadow, add the inset keyword to the 
box- shadow property 


box-shadow: inset color offsetX offsetY blur; 


TRY IT where the meanings of the offset xX and offsetyY values are switched when applied to 


Explore multiple box interior shadowing so that positive offsetX and offsetyY values move the shadow to 


shadows waite the left and up within the box, while negative offsetx and offsetY values move the 


demo_box.html file from . 
Ai Ga ee shadow to the right and down. 


MeL =HTML 5 and CSS | Tutorial 4 Graphic Design with CSS 


Figure 4-27 


An object can contain a mixture of exterior and interior shadows. Figure 4-27 
shows examples of box shadows, including one example that mixes both interior and 
exterior shadows. 


Examples of box shadows 


tl 


box-shadow: 15px 15px; box-shadow: rgb(127, 90, 0) -10px -10px 15px; 
background-color: rgb(90, 141, 191); background-color: rgb(101, 191, 101); 
box-shadow: inset rgb(0, 51, 101) - 0px -15px 15px, box-shadow: inset rgb(0, 101, 51) 10px 15px 15px, 
inset white 5px 5px 5px; inset white -5px -5px 25px, 


rgb(51, 51, 51) -10px -10px 20px; 


Kevin suggests that you add inset shadows to the article element, placing medium 
gray shadows within the article to make it appear raised up from the surrounding page 
content. 


To add inset shadows: 


BD 1. Return to the tb_visual1.css file in your editor and go to the Article Styles 
section. 


2. Wiis the Syistule forthe nets selement. nee he follaving bo ahadoe 


box-shadow: inset rgb(71, 71, 71) -10px -10px 25px, 
inset rgb(71, 71, 71) 10px 10px 25px; 


Figure 4-28 highlights the newly added code for the inset box shadow. 


Tutorial 4 Graphic Design with CSS | HTML 5 and CSS HTML 309 


Figure 4-28 Adding an inset shadow 


places a medium- 

gray shadow in the 

lower-right interior 
corner 

q 


inset keyword 
places shadow 
| msiele the object 


packgrounds (tb_back2. png) tt t fi — cent ' 
(tb_back3. png) tt ft f if eat tent Ky 
(tb_back4.png) 1 / ; rt, 


(il, 211, 


places a medium-gray 
shadow in the 
upper-left interior 
corner 


1)3 
box-shadow!: t Fk Th 1) 
(= { ly 1) 


BD 3. Save your changes and reload tb_komatsu.html in your browser. The inset 
shadow for the page body element is shown in Figure 4-29. 


Figure 4—29 Page article with interior shadowing 


interior shadow 
placed on the left 
and up based on 
positive offset values 


The Komatsu Family 


interior shadow 
placed on the right 
and down based on 
negative offset values 


ga 


Genta Komatsu wes bom in Hadanc, Japan in 
1946, the son of Goro Komatsu and Hessko 
(Sto), The family emigrated to San Francisco in 
1960. Gents became 8 U.S. citizen In 1968 and 
attended the Universty of San Francisco, 
tecetving = Masters degree in Electrical 
Engineering. In 1974 he met and married Mika 
(Aol), daughter of Yor! and Marie Aoki. Mika was 
& registered nurse and worked at several hospitals 
in the Bay Area, 


Genta passed away from pancreatic cancer in 
~ 2039 and is survived by his brother Michi, wife 
= -5 Mika, Son Ikko, daugnter-in-low Suruko, and 
— grandson Hiro), Mika ves in retirement in 

(% Phoenix near her family and her energetic 
grandson, 


Source: Wikimedia Commons; © imtmphoto/Shutterstock.com 


By default, a box shadow has the same size and dimensions as its page object offset 
in the horizontal and vertical direction. To change the shadow size, add the spread 
parameter to the box-shadow property, specifying the size of the shadow relative to 
the size of the page object. A positive value increases the size of the shadow, while a 
negative value decreases it. For example, the following style creates a gray shadow that 
is offset from the page object by 5 pixels in both the vertical and horizontal direction 
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with no blurring but with a shadow that is 15 pixels larger in the horizontal and 
vertical directions than the object: 


box-shadow: gray 5px 5px Opx 15px; 


On the other hand, the following style creates a shadow that is 15 pixels smaller 
than the page object: 


box-shadow: gray 5px 5px Opx -15px; 


Creating a Box Shadow 
e To add a shadow to a block element, use 
box-shadow: color offsetX offsetY blur spread; 


where color is the shadow color, offset X and offsetyY are the distances of the 
shadow from the element in the horizontal and vertical directions, blur defines the 
amount by which the shadow is stretched and spread sets the size of the shadow 
relative to the size of the block element. If no spread is specified, the shadow has the 
same size as the block element. 

e To create an interior shadow, include the inset keyword 


REFERENCE 


box-shadow: inset color offsetX offsetY blur spread; 
e To create multiple shadows place them in a comma-separated list: 
box-shadow: shadowl, shadow2, ...; 


where shadow1, shadow2, and so on are definitions for individual shadows with the 
first shadows listed displayed on top of subsequent shadows. 


One application of the spread parameter is to create a visual effect in which the 
object appears to be surrounded by a halo. This is achieved by setting the shadow 
offsets to 0 pixels while making the shadow larger than the page object itself. Kevin 
suggests that you use this technique to add a green halo to the aside element. 


To increase the shadow size: 


BD 1. Return to the tb_visual1.css file in your editor and go to the Aside Styles 
section. 


BD 2. Within the style rule for the aside element, insert the following style: 


box-shadow: rgba(51, 91, 51, 0.4) Opx Opx 20px 10px; 


Figure 4-30 highlights the style to add a halo to the aside element. 


aside { 20-pixel blur 
border: 4px double rgb(45, 93, 62); 
border-radius: 30px; 


box-shadow: rgba(51, 91, 51, ©.4) Opx Opx 20px 10px; 


zero shadow offset 
in the horizontal and 
vertical direction 


shadow is 10 pixels 
wider and taller 
than the object 


semi-transparent 
green shadow 
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BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-31 
shows the revised appearance of the aside element with the glowing green 
shadow. 


Figure 4-31 Aside element with glowing effect 


green halo added 
_around aside box 


© imtmphoto/Shutterstock.com 


Creating a Reflection 


WebKit, the rendering engine for Safari and Google Chrome, includes support for 
adding reflections to page objects through the following property 


-webkit-box-reflect: direction offset mask-box-image; 


INSIGHT 


where direction is the placement of the reflection using the keywords above, 
below, left, or right; offset is the distance of the reflection from the edge of 
the element box, and mask-box-image is an image that can be used to overlay the 
reflection. For example, the following style rule creates a reflection that is 10 pixels 
below the inline image: 

img { 

-webkit-box-reflect: below 10px; 
} 


There is no equivalent reflect property in the official W3C CSS specifications. Before 
using the reflect property, you should view the current browser support for the 
-webkit -box-reflect property at caniuse.com. 
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Applying a Color Gradient 


So far you have worked with backgrounds consisting of a single color, though that 
color can be augmented through the use of drop shadows. Another way to modify the 
background color is through a color gradient in which one color gradually blends 
into another color or fades away if transparent colors are used. CSS supports linear 
gradients and radial gradients. 


Creating a Linear Gradient 


A linear gradient is a color gradient in which the background color transitions from a 
starting color to an ending color along a straight line. Linear gradients are created using 
the linear-gradient function 


linear-gradient (colorl, color2, ...) 


where colori, color2, and so on are the colors that blend into one another starting 
from colori, through color2, and onto the last color listed. The default direction for 
a linear color gradient is vertical, starting from the top of the object and moving to the 
bottom. 
Gradients are treated like background images and thus can be used with any 
i reaenoendleels CSS property that accepts an image such as the background, background- image, 
backgrounds, gradients and list-style-image properties. For example, to create a linear gradient as a 


can be combined with solid background for the page body, you could apply the following style rule: 
colors and background 


images to create interesting body { 
visual effects; one gradient background: linear-gradient (red, yellow, blue) ; 
can also be overlaid on top } 


f another. : : . . 
bas Figure 4-32 shows the appearance of this vertical gradient as the background color 


transitions gradually from red down to yellow and then from yellow down to blue. 


Figure 4-32 Linear gradient with three colors 


quaipes6 jeoJ190n 


linear-gradient(red, yellow, blue) 


To change from the default vertical direction, you add a direction value to the 
linear-gradient function 


linear-gradient (direction, colori, color2, ...) 


where direction is the direction of the gradient using keywords or angles. Direction 
keywords are written in the form to position where position is either a side of the 
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object or a corner. For example the following linear gradient moves in a straight line to 
the left edge of the object blending from red to yellow to blue: 


background: linear-gradient (to left, red, yellow, blue); 


To move toward the corner, include both corner edges. The following style moves the 
gradient in the direction of the object’s bottom right corner: 


background: linear-gradient (to bottom right, red, yellow, blue); 


For square objects, a To move in a direction other than a side or corner, you can express the direction 
direction of 45deg is using an angle value. Angles are measured in degrees with Odeg equal to to top, 
equivalent to a direction of ~~ gQdeg equal to to right, 180deg equal to to bottom, and 270deg equal to to left 
ieee canna (see Figure 4-33.) 


Figure 4-33 Linear gradient directions 


to top 


to left to right 


to bottom 


For example, the following gradient points at a 60 degree angle: 
background: linear-gradient (60deg, red, yellow, blue); 


Figure 4-34 shows other examples of linear gradients moving in different directions 
using both syntaxes. 
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Transparency and Gradients 


Interesting gradient effects can be achieved using transparent colors so that the 
background color gradually fades away as it moves in the direction of the gradient. For 
example, the following style creates a linear gradient that gradually fades away from its 
initial solid red color: 


INSIGHT 


ilsiavere—C paevebyeinie (Gael (55, O, OW, il), weirs, O, @, @))) 


Note that since the final color is completely transparent it will adopt the background 
color of the parent element. 

You can also use gradients to create background images that appear to fade by 
using multiple backgrounds in which the gradient appears on top of an image. For 
example, the following background style creates a fading background using the 
back.png image file: 

background: linear-gradient (rgb(255, 255, 255, 0), rgb(255, 

255, 255, i)))) , well (loeiehs.joriei)) )) p 


When rendered by the browser, the background image will start as solid but gradually 
fade to white as the linear gradient proceeds through the element background. 


Figure 4-34 Directions of linear gradients 


linear-gradient(to left bottom, red, yellow, blue) 


linear-gradient(300deg, red, yellow, blue) 


linear-gradient(-200deg, red, yellow, blue) 


Tutorial 4 Graphic Design with CSS | HTML 5 and CSS HTML 315 


Note that the degree values can be negative in which case the direction is pointed 
counter-clockwise around the circle shown in Figure 4-33. A negative angle of —45deg, 
for example, would be equivalent to a positive angle of 315deg, an angle of -200deg 
would be equal to 160deg, and so forth. 


Gradients and Color Stops 


The colors specified in a gradient are evenly distributed so that the following gradient 
starts with a solid red, solid green appears halfway through the gradient, and finishes 
with solid blue: 


background: linear-gradient (red, green, blue) ; 


To change how the colors are distributed, you define color stops, which represent 
the point at which the specified color stops and the transition to the next color begins. 
The linear-gradient function using color stops has the general form 


linear-gradient (direction, color-stop1, color-stop2, ...) 


where color-stop1, color-stop2, and so on are the colors and their stopping 
positions within the gradient. Stopping positions can be entered using any of the CSS 
units of measurement. For example, the following gradient starts with solid red up 
until 50 pixels from the starting point, red blends to solid green stopping at 60 pixels 
from the starting point and then blends into solid blue 80 pixels from the start. After 
80 pixels, the gradient will remain solid blue to the end of the background. 


linear-gradient (red 50px, green 60px, blue 80px) 


TRY.IT Similarly, the following style rule sets the color stops using percentages with solid 


red for the first 25% of the background, transitioning to solid green from 25% to 
Mteaegibstonle SieFr ai 75% of the background, and then transitioning to solid blue from 75% to 95% of the 
linear gradients using the ° : 8 ; 8 aces 7 
alma. llinasrlitanall Gite Fone background size. From that point to the end, the background remains solid blue. 
LULL Res Mende leit linear-gradient (red 25%, green 75%, blue 95%) 

Figure 4-35 shows an example of a linear gradient in which color stops are used to 

create a narrow strip of yellow within a background of red blended into blue. 


Figure 4-35) 4-35 Linear gradient color stops 


solid red (start to 25%) 


red to blue (25% to 45%) 


blue to yellow to blue 
(45% to 49% to 51%) 


Vie to red (51% to 75%) 


solid red (75% to end) 


linear-gradient(red 25%, blue 45%, yellow 49%, blue 51%, red 75%) 


Kevin suggests you use a linear gradient that transitions from light green to dark green 
as the background for the page footer. 
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To apply a linear gradient: 


BD 1. Return to the tb_visual1.css file in your editor and go to the Footer Styles 
section. 


D2. Insert the following style rule for the footer element: 


footer { 
background: linear-gradient (345deg, rgb(172, 232, 172), 
mein (Aal, SH, al) Ok) 


y 
Figure 4-36 highlights the style to create the linear gradient. 


Figure 4-36} 4-36 Applying a linear gradient 


ix 


Footer Styles | gradientis 
pointed ata 
footer { 345° angle 
background: lLinear-gradient(345deg, rgb(172, 232, 172), 

rgb(21, 35, 21) 80%); 
} 


initial color 
is light green 


final color is 
dark green 


background is 
dark green from 
80% to the end 


BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-37 
shows the revised appearance of the page footer with a linear gradient. 


Figure 4-37) 4-37 Page footer with linear gradient background 


end of gradient 


tree and Book © 20271 English (US) 


The other color gradient supported in CSS is a radial gradient. You will explore how 
to create radial gradients now. 


Creating a Radial Gradient 


A radial gradient is a color gradient that starts from a central point and proceeds 
outward in a series of concentric circles or ellipses. Figure 4-38 shows an example of a 
radial gradient consisting of a series of concentric ellipses radiating from a central red 
color to an ending blue color. 
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Figure 4-38 A radial gradient of three colors 


radial-gradient(red, yellow, blue) 


Radial gradients are created using the following radial-gradient function. 


radial-gradient (shape size at position, color-stopl, 
color-stop2, ...) 


The shape value defines the shape of the gradient and is either ellipse (the default) 
or circle. The size value defines the extent of the gradient as it radiates outward and 
can be expressed with a CSS unit of measure, a percentage of the background’s width 
and height, or with one of the following keywords: 


e farthest-corner (the default) Gradient extends to the background corner farthest 
from the gradient’s center. 


° farthest-side Gradient extends to background side farthest from the gradients 
center. 

® closest-corner Gradient extends to the nearest background corner. 

° closest-side Gradient extends to the background side closest to the 


gradient’s center. 


The position defines where the gradient radiates from and can be expressed in 
coordinates using pixels, percentages of the element's width and height, or with the 
keywords: left, center, right, top, and bottom. The default is to place the gradient 
within the center of the background. 

Finally the color-stop1, color-stop2 ... values are the colors and their stopping 
positions within the gradient and have the same interpretation used for linear gradients 
except they mark stopping points as the gradient radiates outward. Note that the 
color stops are optional, just as they are in linear gradients. For example the following 
function defines a circular gradient radiating from the horizontal and vertical center of 
the background through the colors red, yellow, and blue: 


radial-gradient (circle closest-corner at center center, 
red, yellow, blue) 


The gradient ends when it reaches the closest background corner. Anything outside of 
the gradient will be a solid blue. 


TRY. IT Figure 4-39 shows other examples of the different effects that can be accomplished 


using the radial-gradient function. Note that when parameters of the radial-gradient 


You can explore how L é 2 
A function are omitted they take their default values. 


to create your own 

radial gradients using the 
demo_radial.html file from 
the html04 » demo folder. 
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Figure 4-39 Examples of radial gradients 


radial-gradient(circle closest-side, red, yellow, blue) 


radial-gradient(120px 180px at 25% 75%, red, yellow, blue) 


radial-gradient(at right, red 46%, yellow 50%, blue 54%) 


Kevin would like you to apply a radial gradient to the background of the aside 
element. The gradient will start from a white center blending into to a medium green 
and then into a darker shade of green. 


To apply a radial gradient: 
D 1. Return to the tb_visual1.css file in your editor and go to the Aside Styles 
section. 
BD 2. Add the following style to the style rule for the aside element: 


background: 
radial-gradient (white, rgb(151, 222, 151), 
res ((jil, lA, ial) )) g 
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Note that this style supersedes the previous background style created in the 
tb_styles1.css style sheet. Figure 4-40 highlights the code to create the radial 
gradient. 


Applying a radial gradient 


color at the center outside color 
aside 


{ 
background: radial-gradient(white, rgb(i51, 222, 151), rgb(81, 125, 81)) 
border: 4px double rgb(45, 93, 62); 


s0px ; 


os color in the middle 
dow: rgeba(51, 91, 51, 9.4) Spx Opx 26; 16px;s 


BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-41 
shows the radial gradient within the aside element. 


Figure 4-41 Aside element with radial gradient background 


center of 


gradient 


© imtmphoto/Shutterstock.com 


Kevin likes the effect of the radial gradient on the aside element and feels that it 
works well with the glowing effect you added earlier. 
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Gradients and Browser Extensions 


The gradient functions were heavily revised as they went from being browser-specific 
properties to the final syntax approved by the W3C. If you work with older browsers, 
you may need to accommodate their versions of these gradient functions. For example, 
the following linear gradient that blends red to blue going in the direction to the right 
edge of the background 


INSIGHT 


linear-gradient (to right, red, blue) 
would be expressed using the old WebKit gradient function as: 
-webkit-gradient (linear, left, right, from(red), to(blue) ) 


Other older versions of browsers such as Mozilla, Internet Explorer, and Opera have 
their own gradient functions with different syntax. You can study these functions using 
the online support at the browser websites or doing a search on the Web for CSS 
gradient functions. 

Note that not all browser extensions support the same types of gradients, which 
means that it is difficult and sometimes impossible to duplicate a particular gradient 
background for every browser. Thus, you should not make gradients an essential 
feature of your design if you want to be compatible with older browsers. 


Repeating a Gradient 


As you add more color stops, the gradient function can become unwieldy and overly 
complicated. One alternative is to repeat the gradient design. You can repeat linear and 
radial gradients using the functions 


repeating-linear-gradient (params) 
repeating-radial-gradient (params) 


TRY. IT where params are the parameters of the linear-gradient or the radial-gradient 


functions already discussed. The only requirement for a repeating gradient is that a 


Ye t ; setae ; ; 
etme A stopping position is required for the last color in the list that is less than the size of the 


repeating gradients using 


the demo_repeat_linear. object background. Once the last color in the color list is reached, the gradient starts 
html and demo_repeat_ over again. For example, the following function repeats a vertical gradient starting with 
radial.html files from the white transitioning to black, transitioning back to white at 10% of the height of the 
html04 » demo folder. 


object, and then repeating that pattern each time it reaches the next 10% of the height 
of the object: 


repeating-linear-gradient (white, black 10%) 


Figure 4-42 shows some other examples of repeating linear and radial gradients. 
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Figure 4-42 Repeating a gradient 


repeating-linear-gradient(to left bottom, red 5%, yellow 18%, blue 20%) 


repeating-radial-gradient(circle, red 10%, yellow 25%, blue 30%) 


Creating a Gradient 
° To create a linear gradient, use the function 
linear-gradient (direction, color-stop1, color-stop2, ....) 


where direction is the direction of the gradient and color-stop1, color-stop2, 
and so on are the colors and their stopping positions within the gradient. 
¢ To create a radial gradient, use the function 


REFERENCE 


radial-gradient (shape size at position, color-stopl, 
COLOr=SIEQOF, x) 


where shape defines the shape of the gradient, size sets the gradient size, position 
places the center of the gradient, and color-stop1, color-stop2, and so on are the 
colors and their stopping positions within the gradient. 

¢ To repeat a gradient, use the functions 


repeating-linear-gradient (params) 
repeating-radial-gradient (params) 


where params are the parameters of the linear-gradient or the radial-gradient 
functions. 


The last visual effect that Kevin wants you to add to the Komatsu Family page is to 
make the figure box semi-transparent so that it blends in better with its background. 
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Gradients as Images 


Gradients can be treated as images and thus can be tiled within a background or 
used with the border- image style. For example, the following style rule creates a 
background of radial gradients repeated in the horizontal and vertical directions: 


INSIGHT 


background-size: 50% 50%; 
background-image-repeat: repeat; 
background-image: radial-gradient (circle, yellow, blue); 


TRY.IT Note that setting the background size to 50% 50% sets the width and height of 
each radial gradient to half of the width and height of the object. By setting the 


Y | dient: ; ie : 
a ecar pisses ecu comin background-image-repeat style to repeat, the entire background is filled with 


as backgrounds in the 


demo_linear_image.htm| radial gradients, resulting in two rows of two gradient images. 
and demo_radial_image. The following code shows how to use a linear gradient as a border image: 
html files in the htm|04 > 
emoroden border: 30px solid transparent; 
border-image: (linear-gradient (yellow, blue)), 15); 
TRY. IT. with the image file replaced by the linear-gradient() function. The gradient is generated 


saa ie for the entire object but is trimmed with a slice width of 15px to form the gradient 


gradient borders using the border. 
demo_gradient_border. 
html file in the htm|04 > 
demo folder. 


Creating Semi-Transparent Objects 

In Tutorial 2, you learned that you could create semi-transparent colors that blend with 
the background color. You can also create whole page objects that are semi-transparent 
using the following opacity property: 


opacity: value; 


where value ranges from 0 (completely transparent) up to 1 (completely opaque). 
For example, the following style rule makes the page body 70% opaque, allowing a bit 
of the browser window background to filter through 


body { 
opacity: 0.7; 


Making a Semi-transparent Object 
¢ To make a page object semi-transparent, use the property 
opacity: value; 


where value ranges from 0 (completely transparent) up to 1 (completely opaque). 


REFERENCE 


Kevin suggests that you set the opacity of the figure box to 55% in order to blend the 
figure box with the paper texture background you added to the article element. 
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To create a semi-transparent object: 


BD 1. Return to the tb_visual1.css file in your editor and scroll up to the Figure Box 
Styles section. 


D 2. Within the style rule for the figure element, insert the following style: 
CpEeblinive Wo Skip 
Figure 4-43 highlights the code to make the figure box semi-transparent. 


Figure 4—43 Creating a semi-transparent object 


figure { 

border-style: solid; 

border-width: 25px; 

border-image: url(tb_border.png) 50 repeat; 
margin: 20px auto Opx;3 


POAT Oe BE 


sets the opacity of 
the figure box to 55% 


O 
5) 
0 
< 


width: 809%; 


BD 3. Save your changes and reload tb_komatsu.html in your browser. Figure 4-44 
displays the semi-transparent figure box with part of the background paper 
texture showing through. 


Changing the opacity ofthe igure box 


part of the 

background 

page texture (L-R): Sicko; Mika. Hiropi, Genta. Suzuko 
shows through 

in the figure box 


© imtmphoto/Shutterstock.com 
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by 


Written Communication: How to Use Visual Effects 


The CSS visual styles can add striking effects to your website, but they might not be 
supported by older browsers. This leaves you with the dilemma of when and how to 
use these styles. Here are some tips to keep in mind when applying visual effects to 
your website: 


PROSKILLS 


¢ Because not every user will be able to see a particular visual effect, design your 
page so that it is still readable to users with or without the effect. 

¢ Be aware that some visual effects that flicker or produce strobe-like effects can 
cause discomfort and even photo-epileptic seizures in susceptible individuals. 
Avoid clashing color combinations and optical illusions that can cause these 
conditions. 

e If you need to create a cross-browser solution, use browser extensions and be 
aware that the browser extension syntax might not match the syntax of the CSS 
standard. 

¢ Consider using graphic images to create your visual effects. For example, rather 
than using the CSS gradient functions, create a background image file containing 
the gradient effect of your choice. 


No matter how you employ visual effects on your website, remember that the most 
important part of your site is its content. Do not let visual effects distract from your 
content and message. 


At this point you’ve completed your work on the design of the Komatsu Family page. 
In the next session, you will learn how to use CSS to apply transformations and filters. 
You will also learn how to work with image maps to create linkable images. Close any 
open files now. 


Session 4.2 Quick Check 


1. Provide a style rule to create a red text shadow that is 5 pixels to the right and 
10 pixels up from the text with a blur of 15 pixels. 
a. text-shadow: red 5px 10px 15px; 
b. text-shadow: red -5px 10px 15px; 
c. text-shadow: red 5px -10px 15px; 
d. text-shadow: red -5px -10px 15px; 
2. Provide a style rule to add a blue drop shadow to a page object that is 2 pixels 
to the left, 5 pixels up and with a blur radius of 8 pixels. 
a. box-shadow: blue 2px 5px 8px; 


REVIEW 


b. box-shadow: blue -2px 5px 8px; 

C. box-shadow: blue 2px -5px 8px; 

d. box-shadow: blue -2px -5px 8px; 

3. Provide a style to add a green interior drop shadow that is 2 pixels to the left, 

5 pixels up and a blur radius of 8 pixels. 

a. box-shadow: green 2px 5px 8px; 

b. box-shadow: green 2px 5px 8px inset; 

C. box-shadow: green -2px -5px 8px; 


d. box-shadow: green -2px -5px 8px inset; 
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4. Provide a style rule to create a red halo effect with no shadow offset, a blur of 
15 pixels and a shadow size that is 10 pixels larger than the element. 
a. box-shadow: red Opx Opx 15px 10px; 
b. box-shadow: red Opx Opx 10px 15px; 
Cc. box-shadow: red 15px 10px Opx Opx; 
d. box-shadow: red 10px 15p x0px Opx; 
5. Provide code for a linear gradient that moves in the direction of the lower-left 
corner of the element through the colors: orange, yellow, and green. 
a. linear-gradient (left bottom, orange, yellow, green) 
b. linear-gradient (bottom left, orange, yellow, green) 
c. linear-gradient (to left bottom, orange, yellow, green) 
d. linear-gradient (from right top, orange, yellow, green) 

6. Create a linear gradient that moves at a 15 degree angle with the color orange 
stopping at 10% of the background, yellow stopping at 50%, and green 
stopping at 55%. 

a. linear-gradient (15deg, 10% orange, 50% yellow, 55% green) 
b. linear-gradient (15deg, orange 10%, yellow 50%, green 553%) 
c. linear-gradient (15deg, orange 10% yellow 50% green 55%) 

d. linear-gradient (195deg, 10% orange, 50% yellow, 55% green) 

7. Create a radial gradient that extends to the farthest background corner, going 
through the colors orange, yellow, and green. 

a. radial(farthest-corner, orange, yellow, green) 

b. radial-gradient (from farthest-corner, orange, yellow, green) 
c. radial-gradient (farthest-corner, orange, yellow, green) 

d. radial (farthest-corner, orange, yellow, green) 

8. Create a repeating circular gradient of orange, yellow, and green bands 
centered at the right edge of the element with the colors stopped at 10%, 20%, 
and 30% respectively. 

a. radial-gradient (circle at right center, orange 10%, yellow 
20%, green 30%) 

b. radial-gradient-repeat (circle at right center, orange 10%, 
yellow 20%, green 30%) 

c. radial-gradient-repeat (circle at right center, orange 10% 
10%, yellow 20% 20%, green 30% 30%) 

d. repeating-radial-gradient (circle at right center, orange 
10%, yellow 20%, green 30%) 

9. Create a style rule to set the opacity to 75%. 

a. transparency: 25%; 

b. transparency: 0.25; 

C. opacity: 75%; 

d. transform: opacity(0.75); 
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Session 4.3 Visual Overview: 


Perspective is used in 
3D transformations to 
measure how rapidly 
objects appear to recede 
from or approach the 
viewer. 


: The rotateX and translateY 
1 functions rotate the object 30° 
perspec wives Se'oxs | around the x-axis and move it 
50 pixels toward the viewer. 


etfigurel { 
rotatex(30deg) translateZ(50px); 


The rotateZ and 
rotateY functions 
rotate the object 30° 
around the z-axis and 
60° around the 
y-axis. 


The transform property 

is used to rotate, rescale, 

skew, or shift a page 
object. 

So 


The sepia function 
displays the object 
in a sepia tone. 


filter: sepia(6.8&); 


(Cine filter property is 
used to modify an 
object's color, brightness, 
contrast, or general 
appearance. 


etfigure2 { 
f rotate ( j eg) s¢ ale( Ss 


e 


The scale function 
The grayscale function reduces the object to 
displays the object in f #figure3 { 90% of its default size. 
grayscale. trans‘ : rotate( >) scale ) 


translatey( x) tater ( lec) translateZ( ee 


The saturate and contrast 
functions increase the 
color saturation by 50% 
and increase the color 
contrast by 20%. 


filter: saturate(1.5) contrast(1.2); 


Logo Design Studio Pro; Source: wiki Media; 
© imtmphoto/Shutterstock.com 


& 
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Transformations and Filters 


The image uses a 
sepia tone and is 
rotated around 

the x-axis. 


This shows a rescaled 
image with increased 
color saturation and 

contrast; it is rotated 
around the y-axis. 


This shows the 
image in grayscale 

and rotated around 
the z and y axes. 


Source: Design Studio Pro; Source: Wikimedia Commons; imtmphoto/Shutterstock.com 
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Transforming Page Objects 


In this session, you will examine some CSS styles that can be used to transform the 
appearance of page objects through rotation, rescaling, and translation in space. To 
accomplish these transformations, you'll use the following transform property: 


transform: effect (params) ; 


where effect is a transformation function that will be applied to the page object and 
params are any parameters required by the function. Figure 4—45 describes some of 
the CSS transformation functions. 


Figure 4-45 CSS 2D transformation functions 


Function Description 

translate (offX, offY) Moves the object of £X pixels to the right and of fY pixels down; 
negative values move the object to the left and up 

translateX (of FX) Moves the object of £X pixels to the right; negative values move the 
object to the left 

translateY (of fY) Moves the object of fY pixels down; negative values move the 
object up 

scale(x, y) Resizes the object by a factor of x horizontally and a factor of y 
vertically 

scaleX (x) Resizes the object by a factor of x horizontally 

scaleY(y) Resizes the object by a factor of y horizontally 

skew(anglexX, angleY) Skews the object by anglex degrees horizontally and angley 
degrees vertically 

skewX (angleX) Skews the object by anglex degrees horizontally 

skewY (angleY) Skews the object by angley degrees vertically 

rotate (angle) Rotates the object by angle degrees clockwise; negative values 


rotate the object counter-clockwise 


matrix(n, n, n, n, n, n) Applies a 2D transformation based on a matrix of six values 


For example, to rotate an object 30° clockwise, you would apply the following style 
using the rotate function: 


transform: rotate (30deg) ; 


To rotate an object counter-clockwise, you would use a negative value for the angle 
of rotation. Thus, the following style rotates an object 60° counter-clockwise: 


transform: rotate (-60deg) ; 


Figure 4—46 displays the effects of other transformation functions on a sample 
page image. 
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Figure 4-46 Examples of CSS Transformations 


transform: translate(40px, -35px); transform: scale(0.8, 0.5); 


transform: skew(30deg, 20deg); transform: rotate(-90deg); 


© imtmphoto/Shutterstock.com 


TRY. IT Transforming an object has no impact on the page layout. All of the other page 
objects will retain their original positions. 
You can explore different 2 ‘ : . . 
Dip ieSSwe ReaaRONO Re You can apply multiple transformations by placing the effect functions in a 
using the demo pages space-separated list. In this situation, transformations are applied in the order listed. 
demo_transform2d.html For example, the following style first rotates the object 30° clockwise and then shifts it 
and demo_transform2dm. 20 pixels to the right. 
html from the html04 
> demo folder. transform: rotate(30deg) translateX(20px) ; 


Applying a CSS Transformation 
¢ To apply a transformation to a page object, use the property 
transform: effect (params) ; 


where effect is a transformation function that will be applied to the page object and 
params are any parameters required by the function. 


REFERENCE 
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The website has pages with photos for each individual in the Komatsu family. Kevin 
wants you to work on transforming the photos on Genta Komatsu’s page. Kevin has already 
created the page content and a layout and typographical style sheet but wants you to work 
on the style sheet containing the visual effects. Open the Genta Komatsu page now. 


To open the Genta Komatsu page: 


BD 1. Use your editor to open the th_genta_txt.html and tb_visual2_txt.css 
files from the html04 > tutorial folder. Enter your name and the date in 
the comment section of both files and save them as tb_genta.html and 
tb_visual2.css respectively. 


D 2. Return to the tbh_genta.html file in your editor. Within the document head, 
insert the following link elements to link the page to the tb_reset.css, 
tb_styles2.css, and tb_visual2.css style sheet files. 


<link href="tb reset.css" rel="stylesheet" /> 
<link href="tb_ styles2.css" rel="stylesheet" /> 
<link href="tb visual2.css" rel="stylesheet" /> 


BD 3. Take some time to scroll through the contents of the file. Note that the document 
content consists mainly of three figure boxes each containing a different photo of 
Genta Komatsu. 


D 4. Close the file, saving your changes. 


BD 5. Open the th_genta.html file in your browser. Figure 4-47 shows the initial 
layout and design of the page content. 


Figure 4-47 Initial design of the Genta Komatsu page 


© mtmphoto/Shutterstock.com 
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Kevin feels that the page lacks visual interest. He suggests you transform the bottom 
row of photos by rotating them and shifting them upward to partially cover the main 
photo, creating a collage-style layout. Apply the transform property now to make 
these changes. 


To apply the transform style: 


BD 1. Go to the tb_visual2.css file in your editor and scroll as needed to the 
Transformation Styles section. 


D 2. Insert the following style rule to rotate the figure2 figure box 40° 
counter-clockwise, reduce it to 80% of its former size, and shift it 20 pixels to 
the right and 100 pixels up. Also, add a style to create a drop shadow using 
the code that follows: 


figure#figure2 { 
transform: rotate(-40deg) scale(0.8, 0.8) 
translate(20px, -100px) ; 
box-shadow: rgb(101, 101, 101) 10px 10px 25px; 


} 


BD 3. Add the following style rule to rotate the figure3 figure box 10° clockwise, 
resize it to 90% of its current size, and shift it 120 pixels upward. Also add a 
drop shadow to the figure box using the following style rule: 
figure#figure3 { 

transform: rotate(10deg) scale(0.9, 0.9) 
translateY(-120px) ; 
box-shadow: rgb(101, 101, 101) 10px -10px 25px; 


} 
Figure 4-48 describes the newly added style rules. 


Figure 4-48 Transforming the figure boxes 


rotates the box 40° 
counter-clockwise 


reduces the box size to 
80% of its original size 


#figure2 
isTorms 


translate(2 


) low: rgb(101, » 101) 
} moves the box 20 pixels to 
figures { the right and 100 pixels up 
nsform: rotate(1@deg) scale(®.9, 6.9) translateY(-120px); 


shadow 


-- 
a] 


ng A A> 4 »» 25 ‘ 


rotates the box 10° 
clockwise 


reduces the box size to moves the box 120 
90% of its original size pixels up 


BD 4. Save your changes to the file and then reload tb_genta.html in your browser. 
Figure 4-49 shows the revised design of the page’s content. 
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Figure 4-49 Viewing the transformed figure boxes 


box rotated 40° 
counter-clockwise, 

rescaled and shifted 
up and to the right 


box rotated 10° 
clockwise, rescaled 


©imtmphoto/Shutterstock.com and shifted up 


The transformations you applied rotated the figure boxes along a two-dimensional 
or 2D space that consisted of a horizontal and vertical axis. CSS also supports 
transformations that operate in a three-dimensional or 3D space. 


Setting the Transformation Origin 


By default, transformations originate in the center of the page object. When an object 
is rotated, for example, it rotates the specified number of degrees around its horizontal 
and vertical center. If you wish to rotate around a different point, such as the object's 
left edge or bottom-right corner, you can modify the transformation origin using the 
following transform-origin property: 


TRY. IT. transform-origin: horizontal vertical; 


You can explore the where horizontal and vertical specify the location of the origin of the 
eR oMAN Skea Sithia transformation. For example, the following set of style rules used in conjunction will 


propery inthe dome rotate an object 30 degrees clockwise arounds its bottom-right corner: 
transform2d.html and 


demo_transform2dm.html transform: rotate (30deg) ; 
files from the html04 » 


demo folder. 


INSIGHT 


transform-origin: right bottom; 


Transformations in Three Dimensions 


A 3D transformation is a change that involves three spatial axes: an x-axis that runs 
horizontally across the page, a y-axis that runs vertically, and a z-axis that comes 
straight out of the page toward and away from the viewer. Positive values along the 
axes are to the right, down, and toward the reader; negative values are to the left, up, 
and away from the reader (see Figure 4-50.) 
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Figure 4-50 A page object viewed in 3D 


axis 
Ma — 


X-axis 


V+ 


© imtmphoto/Shutterstock.com 


With the addition of a third spatial axis, you can create effects in which an object 
appears to zoom toward and away from users, or to rotate in three dimensional space. 
Figure 4-51 describes the 3D transformations supported by CSS. 


Figure 4-51 CSS 3D transformation functions 


Function Description 

translate3d(offx, offY, Shifts the object of £X pixels horizontally, of FY pixels vertically, and 
of £2) of £Z pixels along the z-axis 

translateX (of fx) Shifts the object of £X, of FY, or of £Z pixels along the specified axis 


translatey (offY) 

translateZ (offZ) 

rotate3d(x, y, z, angle) Rotates the object around the three-dimensional vector (x, y, z) ata 

direction of angle 

rotateX (angle) Rotates the object around the specified axis at a direction of angle 
rotateyY (angle) 

rotateZ (angle) 

( 


scale3d(x, y, 2) Resizes the object by a factor of x horizontally, a factor of y 
vertically, and a factor of z along the z-axis 

scaleX (x) Resizes the object by a factor of x, y, or z along the specified axis 

scaleY(y) 

scaleZ(z) 

perspective (p) Sets the size of the perspective effect to p 

matrix3d(n, n, .., n) Applies a 3D transformation based on a matrix of 16 values 


For example the following style rotates the object 60° around the x-axis, making it appear 
as if the top of the object is farther from the viewer and the bottom is closer to the viewer. 


transform: rotateX(60deg) ; 


To truly create the illusion of 3D space however, you also need to set the perspective 
of that space. 


Understanding Perspective 


View 3D rotations and a : : : 
perspective values with the Perspective is a measure of how rapidly objects appear to recede from the viewer 


demo_3dview.htm| file in in a 3D space. You can think of perspective in terms of a pair of railroad tracks that 
the html04 » demo folder. appear to converge at a point, known as the vanishing point. A smaller perspective 


NERY =HTML 5 and CSS | Tutorial 4 Graphic Design with CSS 


value causes the tracks to converge over an apparently shorter distance while a larger 
perspective value causes the tracks to appear to go farther before converging. 
You define the perspective of a 3D space using the perspective property 


perspective: value; 


where value is a positive value that measures the strength of the perspective effect 
with lower values resulting in more extreme distortion. For example, the following style 
rule sets the perspective of the space within the div element to 400 pixels. 
div { 
perspective: 400px; 
} 


Any 3D transformations applied to children of that div element will assume 
a perspective value of 400 pixels. Perspective can also be set for individual 
transformations using the following perspective function: 


transform: perspective (value) ; 


Thus, the following style rule sets the perspective only for the figure1 figure box 
within the div element as the figure box is rotated 60° around the x-axis. 


div figure#figurel { 
transform: perspective (400px) rotateX(60deqg) ; 
} 


You use the perspective property when you have several transformed objects 
within a container that all need to appear within the same 3D space with a common 
perspective. You use the perspective function when you have only one object 
that needs to be transformed in the 3D space. Figure 4-52 compares two different 
perspective values for an object rotated 60° around the x-axis in 3D space. 


Figure 4-52 Transformations in three dimensions 


TRY_IT 


Explore multiple 3D 
transformations with the 
demo_transform3dm.html 
file in the html04 » demo 
folder. 


transform: perspective(150px) rotateX(60deg); transform: perspective(300px) 
rotateX(60deg); 


© imtmphoto/Shutterstock.com 


Note that the smaller perspective value results in a more extreme distortion as the 
top of the object appears to more quickly recede from the viewer while the bottom 
appears to approach the viewer more rapidly. 


REFERENCE 


Setting Perspective in 3D 
¢ To set the perspective for a container and the objects it contains, use the property 
perspective: value; 


where value is a positive value that measures the strength of the perspective effect 
with lower values resulting in more extreme distortion. 

¢ To set the perspective of a single object or to set the perspective individually of 
objects within a group of objects, use the perspective function 


transform: perspective (value) ; 


Add 
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a 3D transformation to each of the three figure boxes in the Genta Komatsu page, 


making it appear that they have been rotated in three dimensional space along the x-, y-, and 


Z-axes, 


setting the perspective value to 600 pixels for all of the objects in the page article. 


To apply the 3D transformations: 


D 1. 
Dd 2. 


»D 3. 
Dd 4. 
D 5. 


Return to the tb_visual2.ess file in your editor. 
Directly after the Transformation Styles comment, insert the following style 
rule to set the perspective of the 3D space of the article element. 


article { 
perspective: 600px; 
} 


Next, insert the following style rule for the figure1 figure box to rotate it 30° 
around the x-axis, shift it 50 pixels along the z-axis, and add a drop shadow. 


figure#figurel { 
transform: rotateX(30deg) translateZ(50px) ; 
box-shadow: rgb(51, 51, 51) Opx 10px 25px; 


} 


Add the following functions to the transform property for the figure2 
figure box to rotate the box 30° around the z-axis and 60° around the y-axis: 


rotateZ(30deg) rotateY (60deg) 
Add the following functions to the transform property for the figure3 


figure box to rotate the box counter-clockwise 70° around the y-axis and 
shift it 20 pixels away from the user along the z-axis: 


rotateY(-70deg) translateZ (-20px) 


Figure 4-53 highlights the 3D transformations styles in the style sheet. 


Figure 4-53 Applying 3D transformations 


fa : 
sets the perspective 


of the article space 


to 600 pixels 
. 


c 


rotates the box 30° 
around the x-axis 
and shifts it forward 
50 pixels along the 
Z-axis 


rotates the box 30° 
around the z-axis and 
60° around the y-axis 


rotates the box 70° 
counter-clockwise 
around the y-axis and 
shifts it backward 

20 pixels along the 
Z-axis 


article { 


te Fed CSBurcs adds a box shadow 
} perspective: 600px; on the box’s bottom 


border 


figure#figurel { 
transform: rotatex(30deg) translateZ(50px) ; 
box-shadow: rgb(51,, 51, 51) Opx 10px 25px; 


} 
figure#figure2 { 

transform: rotate(-40deg) scale(@.8, 0.8) 
translate(20px, -100px) 
rotateZ(30deg) rotateY(60deg); 
rgb(101, 101, 101) 10px 10px 25px; 


box-shadow: 


} 


figure#figure3 { 

rotate(10deg) scale(0.9, 0.9) 

trans Latey (-120px) 

rotatey(-70deg) translateZ(-20px) ; 
rgb(101, 101, 101) 10px -10px 25px; 


transform: 


box-shadow: 


HTML 335 
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BD 6. Save your changes to the file and then reload tb_genta.html in your browser. 
Figure 4-54 shows the result of applying 3D transformations to each of the 
figure boxes on the page. 


Figure 4-54 Figure boxes in 3D space 


image rotated 30° 
around the x-axis 
and moved forward 
50 pixels along the 


Z-axis 


image rotated 70° 
counter-clockwise 
around the y-axis and 
shifted backward 20 

pixels along the z-axis 


image rotated 30° 
around the z-axis 

and 60° around the 
y-axis 


© imtmphoto/Shutterstock.com 


You have only scratched the surface of what can be done using transformations. 
For example, you can create a mirror image of an object by rotating it 180° around the 
y-axis. You can create virtual 3D objects like cubes that can be viewed from any angle 
or spun. You are only limited by your imagination. 
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Managing a 3D Space 


You might want to have several objects that coexist within the same 3D space. You can 
do this by creating a container for all those objects, allowing them to share a common 
3D perspective using the following transform-style property: 


INSIGHT 


transform-style: type; 


where type is either preserve -3d to preserve the 3D space for all nested elements 
or £lat to allow the nested elements to exist within their own separate 3D spaces. For 
example, the following style rules will pass the same 3D space to all elements nested 
within the container, including any value assigned to the perspective property. 


#container { 
transform-style: preserve-3d; 


} 


An object in a 3D space is considered to have a front and a back. The default behavior 
is to allow any text or images on the front to “bleed through” to the back (thus 
appearing in reverse when the object is rotated around the x or y axes.) You can turn 


TRY_IT 


Explore managing multiple 
objects within a 3D space 
in the demo_preserve3d. 


html, demo_cards.html, off this feature setting the backface-visibility property to hidden, which prevents 
and demo_cube-html files text and images on the front face of the object from appearing on the back face. 

est the himl0s Fdeme Setting backface-visibility to visible restores the default. 

olaer. 


Exploring CSS Filters 


A final way to alter an object is through a CSS filter. Filters adjust how the browser 
renders an image, a background, or a border by modifying the object's color, 
brightness, contrast, or general appearance. For example, a filter can be used to change 
a color image to grayscale, increase the image’s color saturation, or add a blurring 
effect. Filters are applied using the filter property 


filter: effect (params) ; 


where effect is a filter function and params are the parameters of the function. 
Figure 4-55 describes the different filter functions supported by most current 
browsers. 
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Figure 4-55 CSS filter functions 


Function 


Description 


blur (length) 


brightness (value) 


contrast (value) 


drop- shadow (offsetx 
offsetY blur color) 


grayscale (value) 


hue-rotate (angle) 


invert (value) 


opacity (value) 


saturate (value) 


sepia (value) 


url (url) 


Applies a blur to the image where length defines the size of blur in pixels 


Adjusts the brightness where values from 0 to 1 decrease the 
brightness and values greater than 1 increase the brightness 


Adjusts the contrast where values from 0 to 1 decrease the contrast 
and values greater than 1 increase the contrast 


Adds a drop shadow to the image where of fsetx and offsetY are 
horizontal and vertical distances of the shadow, blur is the shadow 
blurring, and color is the shadow color 


Displays the image in grayscale from 0, leaving the image unchanged, 
up to 1, displaying the image in complete grayscale 


Adjusts the hue by angle in the color wheel where Odeg leaves the 
hue unchanged, 180deg displays the complimentary colors and 
360deg again leaves the hue unchanged 


Inverts the color from 0 (leaving the image unchanged), up to 1 
(completely inverting the colors) 


Applies transparency to the image from 0 (making the image 
transparent), up to 1 (leaving the image opaque) 


Adjusts the color saturation where values from 0 to 1 decrease the 
saturation and values greater than 1 increase the saturation 


Displays the color in a sepia tone from 0 (leaving the image 
unchanged), up to 1 (image completely in sepia) 


Loads an SVG filter file from url 


Figure 4-56 shows the impact of some of the filter functions on a sample image. 


Figure 4-56 CSS filter examples 


filter: none; 


filter: blur(3px); 


filter: sepia(0.8); filter: saturate(2.5); 


filter: hue-rotate(60deg); 


filter: invert(0.9); 


©imtmphoto/Shutterstock.com 
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TRY. IT Filter functions can be combined in a space-separated list to create new effects. 
Explore the CSS see pie For example, the following style reduces the object's color contrast and applies a 
with the demo_filter.html sepia tone. 
file in the html04 » demo 


filter: contrast (75%) sepia(100%) ; 
folder. 


With multiple filter effects, the effects are applied in the order they are listed. Thus, a 
style in which the sepia effect is applied first followed by the contrast effect will result 
in a different image than if the order is reversed. 


Applying a CSS Filter 
¢ To apply a CSS filter to a page object, use the property 
filter: effect (params) ; 


where effect is a filter function and params are the parameters of the function. 


REFERENCE 


Kevin wants you to apply filters to the photos in the Genta Komatsu page. He wants 
a sepia tone applied to the first photo, a grayscale filter applied to the second photo, 
and a color enhancement applied to the third photo. 


To apply the CSS filters: 


BD 1. Return the tb_visual2.css file in your editor and go down to the Filter Styles 
section. 


BD 2. Change the figure’ figure box to a sepia tone by adding the following 
style rule: 


figure#figurel { 
filter: sepia(0.8); 
} 


BD 3. Change the figure2 figure box to grayscale by adding the style rule: 


figure#figure2 { 
filter: grayscale(l1); 
} 


D 4. Increase the saturation and contrast for the figure3 figure box with the style 
rule: 


figure#figure3 { 
filter: saturate(1.5) contrast(1.2); 
} 


Figure 4-57 highlights the CSS filters added to the style sheet. 
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Anping the Filter property 


/* Filter Styles */ 


provides more m oo displays the 
cross-browser } SRR ee TE RROPA ccs figure figure 
support by adding sf _~< box in sepia 
the WebKit 
browser extension 


displays the 
figure2 figure 
box in grayscale 


increases the color 
saturation and 
contrast in the 
figure3 figure box 


-\ contract! 
.) contrast (. 


BD 5. Save your changes to the file and then reload tb_genta.html in your browser. 
Figure 4-58 shows the final design of the Genta Komatsu page. 


Figure 4-58) 4-58 Filters applied to the web page photos 


sepia tone 


grayscale 


color saturation and 
contrast increased 


© imtmphoto/Shutterstock.com 


INSIGHT 


Tutorial 4 Graphic Design with CSS | HTML 5 and CSS 


Box Shadows and Drop Shadows 


You may wonder why you need a drop-shadow filter if you already have the 

box- shadow property. While they both can be used to add shadowing to a page 
object, one important difference is that the drop- shadow filter creates a shadow 
that traces the shape of the object, while the box- shadow property always applies 
a rectangular shadow. Another important difference is that you can only change the 
size of a shadow using the box- shadow property. Thus, if you want to apply a drop 
shadow around objects such as text or a circular shape, use the drop- shadow filter. 
However, if you need to create an internal shadow or change the size of the drop 
shadow shadow, use the box- shadow property. 


You've completed your redesign of the Genta Komatsu page by adding 
transformation and filter effects to make a more visually striking page. Kevin now wants 
to return to the page for the Komatsu family. He wants you to edit the family portrait 
on the page so that individual pages like the Genta Komatsu page can be accessed 
by clicking the person's face on the family portrait. You can create this effect using an 
image map. 


Working with Image Maps 


When you mark an inline image as a hyperlink, the entire image is linked to the 

same file; however, HTML also allows you to divide an image into different zones, or 
hotspots, which can then be linked to different URLs through information provided 

in an image map. HTML supports two kinds of image maps: client-side image maps 
and server-side image maps. A client-side image map is an image map that is defined 
within the web page and handled entirely by the web browser, while a server-side 
image map relies on a program running on the web server to create and administer the 
map. Generally client-side maps are easier to create and do not rely on a connection 
to the server in order to run. 


Defining a Client-Side Image Map 
Client-side image maps are defined with the following map element 


<map name="text"> 
hotspots 
</map> 


where text is the name of the image map and hotspots are defined regions within 
an image that are linked to different URLs. Client-side image maps can be placed 
anywhere within the body of a web page because they are not actually displayed by 
browsers but are simply used as references for mapping the locations of the hotspots 
within the image. The most common practice is to place a map element below the 
corresponding inline image. 

Each hotspot within the map element is defined using the following area element: 


<area shape="shape" coords="coordinates" 
href="url" alt="text" /> 


where shape is the shape of the hotspot region, coordinates are the list of points that 
define the boundaries of that region, uri is the URL of the hypertext link, and text is 
alternate text displayed for non-graphical browsers. 
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Hotspots can be created as rectangles, circles, or polygons (multisided figures) 
using shape values of rect, circle, and poly respectively. A fourth possible shape 


Do not overlap the 


hotspots to avoid value, default, represents the remaining area of the inline image not covered by any 
confusing the user hotspots. There is no limit to the number of hotspots you can add to an image map. 
about which hotspot is For rectangular hotspots, the shape and coords attributes have the general form: 


associated with which URL. 
shape="rect" coords="left,top, right, bottom" 


where left, top are the coordinates of the top-left corner of the rectangle and right, 
bottom are the coordinates of the bottom-right corner. Coordinates for hotspot shapes 
are measured in pixels and thus, the following attributes define a rectangular hotspot 
with the left-top corner at the coordinates (100, 20) and the right-bottom corner at 
(230, 220): 


shape="rect" coords="100,20,230,220" 


To determine the coordinates of a hotspot, you can use either a graphics program 
such as Adobe Photoshop or image map software that automatically generates the 
HTML code for the hotspots you define. Note that coordinates are always expressed 
relative to the top-left corner of the image, regardless of the position of the image on 
the page. For example, in Figure 4-59, the top-left corner of this rectangular hotspot is 
100 pixels right of the image’s left border and 20 pixels down from the top border. 


Figure 4-59 Defining a rectangular hotspot 


(100, 20) 


shape="rect" coords="100,20,230,220" 


©imtmphoto/Shutterstock.com 


Circular hotspots are defined using the attributes 
shape="circle" coords="x,y, radius" 


where x and y are the coordinates of the center of the circle and radius is the circle’s 
radius. Figure 4-60 shows the coordinates for a circular hotspot where the center of the 
circle is located at the coordinates (160, 130) with a radius of 105 pixels. 
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Figure 4-60 Defining a circular hotspot 


(160, 130) 


shape="circle" coords="160,130,105" 


©imtmphoto/Shutterstock.com 


Polygonal hotspots have the attributes 
shape="poly" coords="x1,y1,x2,y2,..." 


where (x1, y1), (x2, y2), ... set the coordinates of each vertex in the shape. Figure 4-61 
shows the coordinates for a 5-sided polygon. 


(73, 14) 


J 20.198) ~ 
: 
& 


shape="poly" coords="73,14,230,14,230,194,160,233,73,194" 


© imtmphoto/Shutterstock.com 


To define the default hotspot for an image, create the following hotspot: 


Default hotspots should shape="default" coords="0,0,width, height" 
always be listed last. : : . ; . . . . 
where width is the width of the image in pixels and height is the image’s height. 


Any region in the image that is not covered by another hotspot activates the default 
hotspot link. 
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Creating an Image Map 
¢ To create an image map, use 


<map name="text"> 
hotspots 
</map> 


REFERENCE 


where text is the name of the image map and hotspots are the hotspots within the 
image. 
¢ To define each hotspot, use 


<area shape="shape" coords="coordinates" href="url" alt="text" /> 


where shape is the shape of the hotspot region, coordinates list the points 
defining the boundaries of the region, url is the URL of the hypertext link, and text 
is alternate text that is displayed for non-graphical browsers. 

¢ To define a rectangular hotspot, use the shape and attribute values 


shape="rect" coords="left,top, right, bottom" 


where left, top are the coordinates of the top-left corner of the rectangle and 
right, bottom are the coordinates of the bottom-right corner. 
¢ To define a circular hotspot, use 


shape="circle" coords="x,y, radius" 


where x and y are the coordinates of the center of the circle and radius is the circle’s 
radius. 
¢ To define a polygonal hotspot, use 


Slazjos= "ool" Ccroroneclss "scl, Wal, 4) WA yoo” 


where (x1, y1), (x2, y2), and so on provide the coordinates of each vertex in the 
multisided shape. 
¢ To define the default hotspot link, use 


shape="default" coords="0,0,width, height" 


where width and height is the width and height of the image. 


Kevin has provided you with the coordinates for five rectangular hotspots to cover 
the five faces on the Komatsu family portrait. Add an image map named “family_map” 
to the tb_komatsu.html page with rectangular hotspots for each of the faces in the 
family portrait. 


To create an image map: 
BD 1. Open or return to the th_komatsu.html file in your editor. 
BD 2. Directly below the figure box, insert the following HTML code: 


<map name="family map"> 
<area shape="rect" coords="74,74,123,141" 
href="tb_ ikko.html" alt="Ikko Komatsu" /> 
<area shape="rect" coords="126,109,177,172" 
href="tb mika.html" alt="Mika Komatsu" /> 
<area shape="rect" coords="180,157,230,214" 
href="tb_ hiroji.html" alt="Hiroji Komatsu" /> 
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<area shape="rect" coords="258,96,312,165" 
href="tb genta.html" alt="Genta Komatsu" /> 
<area shape="rect" coords="342,86,398,162" 
href="tb_ suzuko.html" alt="Suzuko Komatsu" /> 
</map> 


Figure 4-62 highlights the HTML code for the image map and hotspots. 


Figure 4-62 Inserting an image map 


figure 
g src="tb_komatsu.png” alt="family portrait” 
figcaption L-R): Ikko, Suzuko figcaption 


figure 
<map nn ba 
<area shapes"rect™ coords="74,74,123,141" href="tb_ikko. html" alt=" "Tkko Komatsu" pP 


<area shopes"rect" coords="126,169,177,172" hrefa"tb_ mika. html" alt="Nike Komatsu" /> 
<area shape="rect” coords="180, 157,236,214" href="tb_hiroji.htmw" alt="Hiroji Komatsu” /> 
cares shape="rect" coords="258,96,312,165" href="tb_genta.html" alt="Genta Komatsu” /> 
<area shape="rect" coords="342, 86,398, 162" href="tb_suzuko.html" alt="Suzuko Komatsu" /> 


</map> 
coordinates of the URL of the alternate text 
rectangular hotspot hotspot link for the hotspot 


name of the 
image map 


, Genta, 


shape of 
the hotspot 


BD 3. Save your changes to the file. 


With the image map defined, your next task is to apply that map to the image in the 
figure box. 


Applying an Image Map 


To apply an image map to an image, you add the following usemap attribute to the img 
element 


<img srce="url" alt="text" usemap="#map" /> 


where map is the name assigned to the image map within the current HTML file. 


Applying an Image Map 
¢ To apply an image map to an image, add the usemap attribute to the img element 
<img src="url" alt="text" usemap="#map" /> 


where map is the name assigned to the image map. 


REFERENCE 


Apply the family_map image map to the figure box and then test it in your web 
browser. 
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To apply an image map: 


1. Add the attribute usemap="#family map" to the img element for the family 
portrait. 


Figure 4-63 highlights the code to apply the image map. 


Applies the family_map 
image map to the image 


_————— 
ait" usemap="*family_map" 
Suzuko</ figcapt 


t="family porter 
, Miroji, 


Genta, ion 


2. Save your changes to the file and then reload tob_komatsu.html in your 
browser. 


3. Click the five faces in the family portrait and verify each face is linked to a 
separate HTML file devoted to that individual. Use the link under the image 
of each individual to return to the home page. 


Kevin likes the addition of the image map and plans to use it on other photos in the 


website. 


Q 


PROSKILLS % 


Problem Solving: Image Maps with Flexible Layouts 


Image maps are not easily applied to flexible layouts in which the size of the image 
can change based on the size of the browser window. The problem is that, because 
hotspot coordinates are expressed in pixels, they don’t resize and will not point to the 
correct region of the image if the image is resized. 

One way to deal with flexible layouts is to create hotspots using hypertext links that 
are sized and positioned using relative units. The image and the hypertext links would 
then be nested within a figure element as follows: 


<figure class="map"> 
<img src="image" alt="" /> 
<a href="url" id="hotspoti1"></a> 
<a href="url" id="hotspot2"></a> 


</figure> 


The figure box itself needs to be placed using relative or absolute positioning and the 
image should occupy the entire figure box. Each hypertext link should be displayed as a 
block with width and height defined using percentages instead of pixels and positioned 
absolutely within the figure box, also using percentages for the coordinates. As the 
figure box is resized under the flexible layout, the hotspots marked with the hypertext 
links will automatically be resized and moved to match. The opacity of the hotspot 
links should be set to 0 so that the links do not obscure the underlying image file. Even 
though the hotspots will be transparent to the user, they will still act as hypertext links. 

This approach is limited to rectangular hotspots. To create a flexible layout for 
other shapes, you need to use a third-party add-in that automatically resizes the shape 
based on the current size of the image. 


REVIEW 
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You've completed your work on the Komatsu Family pages for Tree and Book. Kevin 
will incorporate your work and ideas with other family pages as he continues on the 
site redesign. He’ll get back to you with more projects in the future. For now you can 
close any open files or applications. 


Session 4.3 Quick Check 


1. Provide the transformation to shift a page object 5 pixels to the right and 10 
pixels up. 
a. transform: translate(5px, 10px); 
b. transform: translate (5px, -10px) ; 
c. transform: translate(-5px, -10px); 
d. translate: -5px 10px; 
2. Provide the transformation to reduce the horizontal and vertical size of an 
object by 50%. 
a. scale: 0.5, 0.5; 
b. transform: scale (0.5, 0.5); 
c. transform: rescale(0.5, 0.5); 
d. transform: resize(0.5, 0.5); 
3. Provide the transformation to rotate an object 30° counter-clockwise around 
the x-axis. 
a. transform: rotate(-30deg) ; 
b. transform: rotate (30deg) ; 
c. transform: rotateX(30deg) ; 
d. transform: rotateX(-30deg) ; 
4. Provide the filter to increase the brightness of an object by 20%. 
a. filter: brightness (20%) ; 
b. filter: brightness (0.2) ; 
c. filter: brightness(1.2); 
d. brightness: 0.2; 
5. Provide the filter to decrease the contrast of an object by 30%. 
a. filter: contrast (0.3); 
b. filter: contrast (0.7); 
c. filter: contrast (30%) ; 
d. filter: contrast (-0.3); 
6. Provide the code to create a triangular hotspot with vertices at (200, 5), (300, 
125), and (100, 125), linked to the info.html file. 
a. <area type="poly" coords="200, 5, 300, 125, 100, 125" 
href="info.html" /> 
b. <area type="triangle" coords="200, 5, 300, 125, 100, 125" 
href="info.html" /> 
Cc. <area type="draw" coords="200, 5, 300, 125, 100, 125" 
href="info.html" /> 
d. <area type="poly" coords="5, 200, 125, 300, 125, 100" 
href="info.html" /> 
7. Provide code to attach the logo.png image to the mapsites image map: 


a. <img src="logo.png" map="mapsites" alt="" /> 
b. <img src="logo.png" map="#mapsites" alt="" /> 
c. <img src="logo.png" imgmap="mapsites" alt="" /> 
d. <img src="logo.png" usemap="#mapsites" alt="" /> 
8. Provide a style rule to transfer 3D space from a container element to its nested 
elements. 


a. transform-style: perspective; 
b. preserve-3d: true; 

c. transfer-style: preserve-3d; 
d. transform-style: preserve-3d; 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code4-1_txt.html, code4-1_back_txt.css, 
code4-1.css, ws.png 


CODE 


Figure 4-64 shows a web page containing text from a Shakespearean sonnet. In this Coding 
Challenge you will augment the text of the poem with background colors and images and add a 
graphic border. 


Coding Challenge 4-1 example page 


Sonnet 116 by William Shakespeare 


Let me not to the marriage of true minds 
Admit impediments. Love is not love 
Which alters when it alteration finds, 

Or bends with the remover to remove. 


O no! it is an ever-fixed mark 

That looks on tempests and is never shaken; 

It is the star to every wand ring bark, 

Whose worth's unknown, although his height be t 
Love's not Time's fool, though rosy lips and cheeks’) o fe 
Within his bending sickle’s compass come; 

Love alters not with his brief hours and weeks, 

But bears it out even to the edge of doom. 


If this be error and upon me prov'd, 
I never writ, nor no man ever lov'd. 


Source: NASA 


Do the following: 


1. Open the code4-1_txt.html and code4-1_back_txt.css files from the html04 » code! folder. Enter 
your name and the date in each document and save the files as code4-1.html and 
code4-1_back.css respectively. 


2. Go to the code4-1.html file in your editor. Within the head section insert a 1ink element linking 
the page to the code4-1_back.css style sheet file. 


3. Enclose the content of the sonnet within a Ligure element. At the top of the £igure element insert 
a figure caption containing the HTML code Sonnet 116 <cite>by William Shakespeare</cite>. 


4. Save your changes to the file and return to the code4-1_back.css file in your editor. 
5. Create a style rule for the £igure element that: 

a. Sets the padding space to 20 pixels. 

b. Adds a 20-pixel border in the ridge style with the color value rgb(52, 52, 180). 


c. Has a background consisting of the image file ws.png placed in the bottom right corner of the 
figure box and set to 45% of the width of the figure box with no tiling. Be sure to separate the 
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position of the image and its size with the / character. Add a second background containing 
the color rgba(52, 52, 180, 0.3). Enter both background properties within a single style rule 
separated by a comma. 
d. Has a black box shadow that is 5 pixels to the right, 10 pixels down with a blur size of 15 
pixels. 
6. Create a style rule for the figure caption that: 
a. Sets the font size to 1.8em. 


b. Centers the text of the caption. 

c. Adds a 2-pixel bottom solid bottom border of the color value rgb(52, 52, 180). 
7. Save your changes to the style sheet. 
8. Open the page in your browser and verify that the design resembles that shown in Figure 4-64. 
9. Submit the completed file to your instructor. 


Coding Challenge 2 


Data Files needed for this Coding Challenge: code4-2_txt.html, code4-2_grad_txt.css, 
code4-2.css, landscape.png 


CODE 


Figure 4-65 shows a web page containing text of a poem by Ella Wheeler Wilcox entitled “Dawn.” 
To augment the poem, a background image containing a linear gradient has been added to the web 
page. In addition, text shadows have been added to bring the text of the poem out of the page. 


Figure 4-65) 4-65 Coding Challenge 4-2 example page 


Dawn 


by Ella Wheeler Wilcox 


Day's sweetest moments are at dawn; 
Refreshed by his long sleep, the Light 
Kisses the languid lips of Night, 


Ere she can rise and hasten on 


All glowing from his dreamless rest 


He holds her closely to his breast, 
Warm lip to lip and limb to limb, 


Until she dies for love of him 


OpenClipArt 
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Complete the following: 


1. Open the code4-2_txt.html and code4-2_grad_txt.css files from the html04 » code2 folder. 
Enter your name and the date in each document and save the files as code4-2.html and 
code4-2_grads.css respectively. 


2. Go to the code4-2.html file in your editor. Within the head section insert a 1ink element linking 
the page to the code4-2_grad.css file. Save your changes to the file. 


3. Go to the code4-2_grad.css file. Create a style rule for h1 and h2 elements that adds a white text 
shadow 2 pixels above and to the left of the text with a blur radius of 3 pixels. 


4. Create a style rule for paragraphs that adds a red text shadow 2 pixels down and to the right of 
the text with a blur radius of 3 pixels. 

5. Create a style rule for the article element that adds a black inset box shadow with a 
horizontal and vertical offset of 0 pixels, a blur radius of 50 pixels and a size of 20 pixels. 

6. Create a style rule for the article element that sets the radius of the border corners to 150 
pixels. 

7. Create a style rule for the article element that adds the following multiple backgrounds: 
a. A background containing the image file landscape.png placed with no tiling at the bottom 

right corner of the element with a size of 100%. 


b. A linear gradient at an angle of 165 degrees that goes from black to the color value rgb(0, 0, 
200) with a color stop of 65%, to rgb(211, 0, 55) with a color stop of 75%, to orange with a 
color stop of 80%, and finally to yellow with a color stop of 82%. 


8. Save your changes to the style sheet. 
9. Open the page in your browser and verify that the design resembles that shown in Figure 4-65. 
10. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code4-3_txt.html, code4-3_cube_txt.css, code4-3.css, 
image01.png - image05.png 


CODE 


Figure 4-66 shows a web page in which five faces of the cube are displayed in a 3D view. You can 
create this effect using the CSS 3D transformation styles. The page also contains CSS styles for box 
shadows and text shadows that you will have to add. 
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Coding Challenge 4-3 example page 


J1aSSICaLSKetches 


Source: Public Domain 


Complete the following to create the web page: 


1. Open the code4-3_txt.html and code4-3_cube_txt.css files from the html04 » code3 folder. 
Enter your name and the date in each document and save the files as code4-3.html and 
code4-3_cube.css respectively. 

2. Go to the code4-3.html file in your editor. Within the head section insert a 1ink element that 
links the page to the code4-3_cube.css style sheet file. Note that within the web page the five 
images are contained with a div element with the ID value “cube”. The images are given ID 
values of img1 through img5. Save your changes to the file. 

3. Go to the code4-3_cube.css file in your editor. Create a style rule for the h1 element that 
changes the font color to white and adds a text shadow with horizontal and vertical offsets of 0 
pixels, a blur radius of 20 pixels and a shadow color value of rgb(120, 85, 0). 

4. Create a style rule for a div element with the id “cube” that sets the perspective size of the 3D 
space to 500 pixels. Use the transform-styl1e property to preserve the 3D setting for the 
children of this element so that the cube and its children exist in the same 3D space. 
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5. For all img elements create a style rule that applies a sepia filter with a value of 1. Add a black 
box shadow with horizontal and vertical offsets of 0 pixels and a blur radius of 20 pixels. 


6. Create the following style rules for the five image elements: 
a. For the img1 image, translate the image -150 pixels along the z-axis. 


b. For the img2 image, rotate the image 90 degrees around the x-axis and translate the image 
-150 pixels along the z-axis. 

c. For the img3 image, rotate the image -90 degrees around the y-axis and translate the image 
150 pixels along the z-axis. 

d. For the img4 image, rotate the image 90 degrees around the y-axis and translate the image 
150 pixels along the z-axis. 


e. For the img5 image, rotate the image -90 degrees around the x-axis and translate the image 
-150 pixels along the z-axis. 


7. Save your changes to the style sheet. 
8. Open the page in your browser and verify that the design resembles that shown in Figure 4-66. 
9. Submit the completed file to your instructor. 


Coding Challenge 4 


Data Files needed for this Coding Challenge: code4-4_txt.html, debug4-4_txt.css, code4-4_.css, 
Michelangelo.png 


DEBUG 


Figure 4-67 shows a completed web page that uses CSS design elements to enhance the appear- 
ance of a poem by Walt Whitman. You've been given a copy of the files for this web page, but there 
are several syntax errors in the CSS stylesheet. Use your knowledge of CSS to fix the stylesheet code 
and complete the page. 
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Coding Challenge 4-4 example page 


Part 1: 


I sing the body electric, 

The armies of those I love engirth n 
them, 

They will not let me off till I ge 


Walt Whitman; Source: Public Domain 


Do the following: 

1. Open the code4-4_txt.html and debug4-4_txt.css files from the html04 > code4 folder. Enter 
your name and the date in each document and save the files as code4-4.html and debug4-4.css 
respectively. 

2. Go to the code4-4.html file in your editor. Within the head section insert a 1ink element that 
links the page to the code4-4_debug.css style sheet file. Study the contents of the file and then 
save your changes. 

3. Go to the debug4-4.css file in your browser. The first style rule adds two text shadows to the h1 
heading: a dark brown shadow and a white highlight. The shadows are not appearing in the web 
page. Locate and fix the syntax error in this style rule. 

4. The next style rule was written to add a box shadow to the article element that has an offset 
of 0 pixels in the horizontal and vertical directions, blur radius of 30 pixels and size value of 5 
pixels. Fix the syntax errors in this style rule. 

5. The next style rule creates a border image for the article element using a linear gradient for 
the image. Fix the syntax error in this style rule. 

6. The final style rule defines the background for the article element consisting of: 

a. A radial gradient going from white circle located near the top left corner of the background, 
to semi-transparent yellow, semi-transparent brown, and semi-transparent ochre, 
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b. A sketch by Michelangelo located in the lower right corner sized at 75% of the width of the 


element, and 


c. An ivory-colored background fill. There are several syntax errors in the code. Locate and fix 


all of the errors. 


7. Save your changes and open the code4-4.html file in your browser. Verify that design of the page 
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resembles that shown in Figure 4-67. 


8. Submit the completed file to your instructor. 


Review Assignments 


PRACTICE 


Data Files needed for the Review Assignments: th_ferris_txt.html, tb_kathleen_txt.html, 
tb_visual3_txt.css, tb_visual4_txt.css, 3 CSS files, 1 HTML file, 10 PNG files, 1 TTF file, 1 WOFF file 


Kevin wants you to work on another family page for the Tree and Book website. The page was created 
for the Ferris family with content provided by Linda Ferris-White. Kevin is examining a new color 
scheme and design style for the page. A preview of the design you'll create is shown in Figure 4-68. 


Figure 4-68 Ferris Family page 


The Ferris Family 


a * 
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My Mother, Kathicen Ferris 


My mother was by pan) woman. Stesee Dorn in 1933 in 
's. From therm 
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Nat tt was to be oye and she knew that 
what we Go for others is etat wil enoure er ere gone, 


ne WAS B EPOMTEWOMAN: BN avid Bina and swimmer. Wwe often would travel to Colorage 
tekee and camp m the may a emai dd thet eam abe tan 43 nay meget hk 
She eared # Mast the was 43 and never st 
taking Ciasses at the bocal conege im Ra 
She nurtured my passion for writing 
of hex words. 


ona ‘orn Ren corperete Law som anoent 
everything wrre @ Womeely o 


My mother passed amay in 2012. I miss het 


— (mee ferms-wrae 


ve wed Cem © 2522 Emglivh (U5) 


Source: Design Studio Pro; Source: Wikimedia Commons; 
© Elzbieta Sekowska/Shutterstock.com 
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All of the HTML content and the typographical and layout styles have already been created for 
you. Your task will be to complete the work by writing the visual style sheet to incorporate Kevin's 
suggestions. 


Complete the following: 


1. Use your HTML editor to open the tb_visual3_txt.css, tb_visual4_txt.css, tb_ferris_txt.html and 
tb_kathleen_txt.html files from the html04 > review folder. Enter your name and the date in the 
comment section of each file, and save them as tb_visual3.css, th_visual4.css, tb_ferris.html, 
and tb_kathleen.html respectively. 

2. Go to the tb_ferris.html file in your editor. Add links to the tb_base.css, tb_styles3.css, and 
tb_visual3.css style sheets in the order listed. 


3. Scroll down and, within the main element header and after the h1 heading, insert a figure box 
containing: a) the tb_ferris.png inline image with the alternate text Ferris Family using the image 
map named portrait_map and b) a figure caption with the text Kathleen Ferris and daughter Linda 
(1961). 

4. Directly below the figure box, create the portrait_map image map containing the following 
hotspots: a) a rectangular hotspot pointing to the tb_kathleen.html file with the left-top coordinate 
(10, 50) and the right-bottom coordinate (192, 223) and alternate text, “Kathleen Ferris” and b) a 
circular hotspot pointing to the tb_linda.html file with a center point at (264, 108) and a radius of 
80 pixels and the alternate text, Linda Ferris-White. 

5. Take some time to study the rest of the page content and structure and then save your changes to 
the file. 

6. Go to the tb_visual3.css file in your editor. In this file, you'll create the graphic design styles for 
the page. 

7. Go to the HTML Styles section and create a style rule for the html element to use the image file 
tb_back5.png as the background. 

8. Go to the Page Body Styles section and create a style rule for the body element that: a) adds a left 
and right 3-pixel solid border with color value rgb(169, 130, 88), b) adds a box shadow to the right 
border with a horizontal offset of 25 pixels, a vertical offset of 0 pixels and a 35-pixel blur and a 
color value of rgb(53, 21, 0), and then adds the mirror images of this shadow to the left border. 


9. Go to the Main Styles section. Create a style rule for the main element that: a) applies the 
tb_back7.png file as a background image with a size of 100% covering the entire background 
with no tiling and positioned with respect to the padding box and b) adds two inset box 
shadows, each with a 25-pixel blur and a color value of rgb(71, 71, 71), and then one with 
offsets of -10 pixels in the horizontal and vertical direction and the other with horizontal and 
vertical offsets of 10 pixels. 

10. Create a style rule for the h1 heading within the main header that adds the following two text 
shadows: a) a shadow with the color value rgb(221, 221, 221) and offsets of 1 pixels and no blurring 
and b) a shadow with the color value rgba(41, 41, 41, 0.9) and offsets of 5 pixels and a 20-pixel blur. 

11. Go to the Figure Box Styles section. Create a style rule for the figure element that sets the top/bottom 
margin to 10 pixels and the left/right margin to auto. Set the width of the element to 70%. 

12. Next, you'll modify the appearance of the figure box image. Create a style rule for the image 
within the figure box that: a) sets the border width to 25 pixels, b) sets the border style to solid, c) 
applies the tb_frame.png file as a border image with a slice size of 60 pixels stretched across the 
sides, d) displays the image as a block with a width of 100%, and e) applies a sepia tone to the 
image with a value of 80% (include the WebKit browser extension in your style sheet). 

13. Create a style rule for the figure caption that: a) displays the text using the font stack ‘Palatino 
Linotype’, Palatino, ‘Times New Roman’, serif, b) sets the style to italic, c) sets the top/bottom 
padding to 10 pixels and the left/right padding to O pixels, and d) centers the text. 

14. Go to the Article Styles section. Here you'll create borders and backgrounds for the article that Linda 
Ferris-White wrote about her mother. Create a style rule for the article element that: a) displays 
the background image file tb_back6.png placed at the bottom-right corner of the element with a 
size of 15% and no tiling, b) adds an 8-pixel double border with color value rgb(147, 116, 68) to 
the right and bottom sides of the article element, c) creates a curved bottom-right corner with a 
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radius of 80 pixels, and d) adds an interior shadow with horizontal and vertical offsets of -10 pixels, 
a 25-pixel blur, and a color value of rgba(184, 154, 112, 0.7). 

15. Kevin wants a gradient background for the page footer. Go to the Footer Styles section and create 
a style rule for the footer that adds a linear gradient background with an angle of 325°, going 
from the color value rgb(180, 148, 104) with a color stop at 20% of the gradient length to the 
value rgb(40, 33, 23) with a color stop at 60%. 

16. Save your changes to the style sheet and then open tb_ferris.html in your browser. Verify that the 
colors and designs resemble that shown in Figure 4-68. 

Next, you will create the design styles for individual pages about Kathleen Ferris and Linda 
Ferris-White. A preview of the content of the Kathleen Ferris page is shown in Figure 4-69. 


Figure 4-69 Kathleen Ferris page 


Kathleen Ferris 


© Elzbieta Sekowska/Shutterstock.com 


17. Go to the tb_kathleen.html file in your editor and create links to the tb_base.css, tb_styles4.css, 
and tb_visual4.css files. Study the contents of the file and then close it, saving your changes. 


18. Go to the tb_visual4.css file in your editor. Scroll down to the Transformation Styles section and 
add a style rule for the article element to set the size of the perspective space to 800 pixels. 


19. Create a style rule for the figure figure box to translate it -120 pixels along the z-axis. 

20. Create a style rule for the figure2 figure box to translate it -20 pixels along the y-axis and rotate 
it 50° around the y-axis. 

21. Create a style rule for the figure3 figure box to translate it -30 pixels along the y-axis and rotate 
it -50° around the y-axis. 
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22. Go to the Filter Styles section to apply CSS filters to the page elements. Create a style rule for the 
figure1 figure box that applies a saturation filter with a value of 1.3. 


23. Create a style rule for the figure2 figure box that sets the brightness to 0.8 and the contrast to 1.5. 

24. Create a style rule for the figure3 figure box that sets the hue rotation to 170°, the saturation to 3, 
and the brightness to 1.5. 

25. Save your changes to the file and then return to the tb_ferris.html file in your browser. Verify that 
you can display the individual pages for Kathleen Ferris and Linda Ferris-White by clicking on their 
faces in the family portrait. Further verify that the appearance of the Kathleen Ferris page resembles 
that shown in Figure 4-69. (Note: Use the link under the pictures to return to the home page.) 


Case Problem 1 


Data Files needed for this Case Problem: sf_torte_txt.html, sf_effects_txt.css, 2 CSS files, 9 PNG files 


Save your Fork Amy Wu has asked for your help in redesigning her website, Save your Fork, a baking 
site for people who want to share dessert recipes and learn about baking in general. She has prepared a 
page containing a sample dessert recipe and links to other pages on the website. A preview of the page 
you'll create is shown in Figure 4-70. 


Figure 4-70 Save your Fork sample recipe page 


H 
Ui Save your Fork 


by Lemking 


iis Bavarian Torte « + =» 


Directions 
whest oven to 45 


o 


— Becwwes oo Augun 28, 2021 dy 
serene 


© Mateusz Gzik/Shutterstock.com; © Jelly/Shutterstock.com; © Courtesy Patrick Carey 
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Amy has already created a style sheet for the page layout and typography, so your work will be 
focused on enhancing the page with graphic design styles. 


Complete the following: 
1. Using your editor, open the sf_torte_txt.html and sf_effects_txt.css files from the html04 > case1 
folder. Enter your name and the date in the comment section of each file, and save them as 
sf_torte.html and sf_effects.css respectively. 


2. Go to the sf_torte.html file in your editor. Within the document head create links to the sf_base. 
css, sf_layout.css, and sf_effects.css style sheet files in that order. Take some time to study the 
structure of the document and then close the document, saving your changes. 

3. Go to the sf_effects.css file in your editor. Within the Body Header Styles section, create a style 
rule for the body element to add drop shadows to the left and right border of the page body 
with an offset of 10 pixels, a blur of 50 pixels, and the color rgb(51, 51, 51). Note that the right 
border is a mirror image of the left border. 

4. Go to the Navigation Tabs List Styles section. Amy has created a navigation list with the class 
name tabs that appears at the top of the page with the body header. Create a style rule for the 
body > header nav.tabs selector that changes the background to the image file sf_back1. 
png with no tiling, centered horizontally and vertically within the element and sized to cover the 
entire navigation list. 

5. Amy wants the individual list items in the tabs navigation list to appear as tabs in a recipe box. 
She wants each of these “tabs” to be trapezoidal in shape. To create this effect, you'll create a 
style rule for the body > header nav.tabs 1i selector that transforms the list item by setting 
the perspective of its 3D space to 50 pixels and rotating it 20° around the x-axis. 

6. As users hover the mouse pointer over the navigation tabs, Amy wants a rollover effect in which 
the tabs appear to come to the front. Create a style rule for the body > header nav.tabs li 
selector that uses the pseudo-element hover that changes the background color to rgb(231, 

28) ll, 23) 

7. Go to the Left Section Styles section. Referring to Figure 4—70, notice that in the left section of 
the page, Amy has placed two vertical navigation lists. She wants these navigation lists to have 
rounded borders. For the vertical navigation lists in the left section, create a style rule for the 
section#left nav.vertical selector that adds a 1-pixel solid border with color value 
rgb(20, 167, 170) and has a radius of 25 pixels at each corner. 

8. The rounded corner also has to apply to the h1 heading within each navigation list. Create a 
style rule for h1 elements nested within the left section vertical navigation list that sets the top- 
left and top-right corner radii to 25 pixels. 

9. Go to the Center Article Styles section. The article element contains an image and brief 
description of the Apple Bavarian Torte, which is the subject of this sample page. Create a style 
rule for the section#center article selector that adds the following: a) a radial gradient 
to the background with a white center with a color stop of 30% transitioning to rgb(151, 151, 
151), b) a 1-pixel solid border with color value rgb(151, 151, 151) and a radius of 50 pixels, 
and c) a box shadow with horizontal and vertical offsets of 10 pixels with a 20-pixel blur and 
a color of rgb(51, 51, 51). 

10. Go to the Blockquote Styles section. Amy has included three sample reviews from users of the 
Save your Fork website. Amy wants the text of these reviews to appear within the image of a 
speech bubble. For every blockquote element, create a style rule that does the following: a) 
sets the background image to the sf_speech.png file with no tiling and a horizontal and vertical 
size of 100% to cover the entire block quote, and b) uses the drop- shadow filter to add a drop 
shadow around the speech bubble with horizontal and vertical offsets of 5 pixels, a blur of 10 
pixels and the color rgb(51, 51, 51). 

11. Amy has included the photo of each reviewer registered on the site within the citation for each 
review. She wants these images to appear as circles rather than squares. To do this, create a style 
rule for the selector cite img that sets the border radius to 50%. 

12. Save your changes to the style sheet file and then open sf_torte.html in your browser. Verify that 
the design of your page matches that shown in Figure 4-70. Confirm that when you hover the 
mouse over the navigation tabs the background color changes to match the page color. 
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Case Problem 2 


Data Files needed for this Case Problem: cf_home_txt.html, cf_effects_txt.css, 2 CSS files, 7 PNG files 


Chupacabra Music Festival Debra Kelly is the director of the website for the Chupacabra Music 
Festival, which takes place every summer in San Antonio, Texas. Work is already underway on the 
website design for the 15‘ annual festival and Debra has approached you to work on the design of 
the home page. 


Debra envisions a page that uses semi-transparent colors and 3D transformations to make an attractive 
and eye-catching page. A preview of her completed design proposal is shown in Figure 4-71. 


CHALLENGE 


© Memo Angeles/Shutterstock.com; © Ivan Galashchuk/Shutterstock.com; © Andrey Armyagov/ 
Shutterstock.com; © Away/Shutterstock.com; Source: Facebook; Source: Twitter, lnc. 


Debra has provided you with the HTML code and the layout and reset style sheets. Your job will be 
to finish her work by inserting the graphic design styles. 


Complete the following: 

1. Using your editor, open the cf_home_txt.html and cf_effects_txt.css files from the 
html04 » case2 folder. Enter your name and the date in the comment section of each file, and 
save them as cf_home.html and cf_effects.css respectively. 

2. Go to the cf_home.html file in your HTML editor. Within the document head, create a link to the 
cf_reset.css, cf_layout.css, and cf_effects.css style sheets. Take some time to study the content and 
structure of the document. Pay special note to the nested div elements in the center section of 
the page; you will use these to create a 3D cube design. Close the file, saving your changes. 

3. Return to the cf_effects.css file in your editor and go to the HTML Styles section. Debra wants 
a background displaying a scene from last year’s festival. Add a style rule for the htm1 element 
that displays the cf_back1.png as a fixed background, centered horizontally and vertically in the 
browser window and covering the entire window. 
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. Go to the Body Styles section and set the background color of the page body to rgba(255, 255, 


233, 0,3). 


. Go to the Body Header Styles section and change the background color of the body header to 


rgba(51, 51, 51, 0.5). 


. Debra has placed useful information for the festival in aside elements placed within the left and 


right section elements. Go to the Aside Styles section and create a style rule for the section aside 
selector that adds a 10-pixel double border with color rgba(92, 42, 8, 0.3) and a border radius of 30 
pixels. 


. Debra wants a curved border for every h1 heading within an aside element. For the selector section 


aside h1, create a style rule that sets the border radius of the top-left and top-right corners to 30 
pixels. 


. Define the perspective of the 3D space for the left and right sections by creating a style rule for those 


two sections that sets their perspective value to 450 pixels. 


. Create a style rule that rotates the aside elements within the left section 25° around the y-axis. Create 


another style rule that rotates the aside elements within the right section —25° around the y-axis. 


~» Explore 10. Go to the Cube Styles section. Here you'll create the receding cube effect that appears 


in the center of the page. The cube has been constructed by creating a div element with the id cube 
containing five div elements belonging to the cube_face class with the ids 
cube bottom, cube top, cube left, cube right, and cube front. (There will be no back face for 
this cube.) Currently the five faces are superimposed upon each other. To create the cube you have to 
shift and rotate each face in 3D space so that they form the five faces of the cube. First, position the 
cube on the page by creating a style rule for the div#cube selector containing the following styles: 
a. Place the element using relative positioning. 
b. Set the top margin to 180 pixels, the bottom margin to 150 pixels, and the left/right margins 

to auto. 
c. Set the width and height to 400 pixels. 
d. Set the perspective of the space to 450 pixels. 


. For each div element of the cube_face class, create a style rule that places the faces with absolute 


positioning and sets their width and height to 400 pixels. 


~» Explore 12. Finally, you'll construct the cube by positioning each of the five faces in 3D space so that 


they form the shape of a cube. Add the following style rules for each of the five faces to transform their 
appearance. 


a. Translate the cube_front div element —50 pixels along the z-axis. 
b. Translate the cube_left div element —200 pixels along the x-axis and rotate it 90° around the y-axis. 
c. Translate the cube_right div element 200 pixels along the x-axis and rotate it 
90° counter-clockwise around the y-axis. 
d. Translate the cube_top div element —200 pixels along the y-axis and rotate it 
90° counter-clockwise around the x-axis. 
e. Translate the cube_bottom div element 200 pixels along the y-axis and rotate it 90° around the 
x-axis. 


. Save your changes to style sheet file and open cf_home.html in your browser. Verify that the layout of 


your page matches Figure 4-71 including the center cube with the five faces of photos and text. 
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Session 5.2 

¢ Create a flexbox 

e¢ Work with flex sizes 

e Explore flexbox layouts 


Case | Trusted Friends Daycare 


Marjorie Kostas is the owner of Trusted Friends Daycare, an early 
childhood education and care center located in Carmel, Indiana. 
Session 5.3 You've been hired to help work on the redesign of the company’s 

¢ Create a print style sheet website. Because many of her clients access the website from 

* Work with page sizes their mobile phones, Marjorie is interested in improving the site’s 

* Add and remove page breaks appearance on mobile devices. However, your design still has to 
be compatible with tablet devices and desktop computers. Finally, 
the site contains several pages that her clients will want to print, so 
your design needs to meet the needs of printed media. 


STARTING DATA FILES 


tf_articles_txt.html 
tf_home_txt.html 
tf_prek_txt.html 
tf_flex_txt.css 
tf_navicon_txt.css 
tf_print_txt.css 
tf_styles1_txt.css 
+ 9 files 


code5-2_txt.html 


code5-2_flex_txt.css 


+ 14 files 


gp_cover_txt.html 
gp_pagel_txt.html 
gp_page2_txt.html 
gp_page3_txt.html 
gp_layout_txt.css 
gp_print_txt.css 

+ 23 files 


tf_tips_txt.html 
tf_print2_txt.css 
tf_styles4_txt.css 
+ 6 files 


code5-3_txt.html 


code5-3_print_txt.css 


+ 2 files 


cw_home_txt.html 
cw_styles_txt.css 
+ 12 files 


code5-1_txt.html 
code5-1_media_txt.css 
+ 3 files 


code5-4_txt.html 
code5-4_debug_txt.css 
+ 3 files 
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Session 5.1 Visual Overview: 


This sets the width of 
the layout viewport 


(ine viewport meta 
tag is used to set the 
properties of the 

layout viewport. 


equal to the width of 
the visual viewport. 


This sets the 
initial scale of the 
viewport to 1.0. 


<meta name="Vviewport" content="width=device-width, initial-scale=1" /> 


Responsive designs 
should start with base 
styles that apply to all 
devices, followed by 
mobile styles, tablet 
styles, and then 
desktop styles. 


480px) { 


(max-width: 


A media query is 
used to apply 
specified style rules 
to a device based on 
the device type and 
the device features. 


Within a media query 
are style rules that are 

only applied to devices 
that match the query. 


Sy 
@media only screen and (min-width: 481ipx) { 


style rules 


@media only screen and (min-width: 769px) { 
style rules 


} 


© Robert Kneschke/Shutterstock.com; © dotshock/Shutterstock.com; BenBois/openclipart; 


JMLevick/openclipart; Molumen/openclipart 


This media query 
matches screens 
with a maximum 
width of 480 pixels. 


This media query 
matches screens 
with a minimum 
width of 481 pixels. 


This media query 
matches screens 
with a minimum 
width of 769 pixels. 
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Media Queries 


Mobile styles are 
applied when the 
screen width is 0 
to 480 pixels. 


Tablet styles are 
applied once the 
screen width 
exceeds 480 pixels. 
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Desktop styles are applied 
once the screen width is 
769 pixels and greater. 


dotshock/Shutterstock.com; Robert Kneschke/Shutterstock.com; Jmlevick/openclipart; Easy/openclipart; BenBois/openclipart 
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Introducing Responsive Design 


In the first four tutorials, you created a single set of layout and design styles for 

your websites without considering what type of device would be rendering the site. 
However, this is not always a practical approach and with many users increasingly 
accessing the web through mobile devices, a web designer must take into 
consideration the needs of those devices. Figure 5—1 presents some of the important 
ways in which designing for the mobile experience differs from designing for the 


desktop experience. 


Designing for mobile and desktop devices 


User Experience 


Mobile 


Desktop 


Page Content 


Page Layout 


Hypertext Links 


Network Bandwidth 


Lighting 


Device Tools 


Content should be short and to the 
point. 


Content should be laid out within 
a single column with no horizontal 
scrolling. 


Links need to be easily accessed 
via a touch interface. 


Sites tend to take longer to load 
over cellular networks and thus 
overall file size should be kept 
small. 


Pages need to be easily visible in 
outdoor lighting through the use of 
contrasting colors. 


Mobile sites often need access 
to devices such as phone dialing, 
messaging, mapping, and built-in 
cameras and video. 


Content can be extensive, giving 
readers the opportunity to explore all 
facets of the topic. 


With a wider screen size, content can 
be more easily laid out in multiple 
columns. 


Links can be activated more precisely 
using a Cursor or mouse pointer. 


Sites are quickly accessed over high- 
speed networks, which can more easily 
handle large file sizes. 


Pages are typically viewed in an office 
setting, allowing a broader color 
palette. 


Sites rarely have need to access 
desktop devices. 


Viewing a web page on a mobile device is a fundamentally different experience 
than viewing the same web page on a desktop computer. As a result, these differences 
need to be taken into account when designing a website. Figure 5-2 shows the current 
home page of the Trusted Friends website as it appears on a mobile device. 


For more information 

on the development of 
responsive design, refer to 
Responsive Web Design 
by Ethan Marcotte (http:// 
alistapart.com/article/ 
responsive-web-design). 
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Trusted Friends home page displayed on a mobile device 


the small text links are 
difficult to activate 
using touch 


small article text is 
difficult to read 


double column layout 
reduces the size of the 
page text within the 
columns 


empty space 
indicates poor use of 
the available screen 
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Notice that the mobile device has automatically zoomed out to display the complete 
page width resulting in text that is difficult to read and small hypertext links that 
are practically unusable with a touch interface. While the design might be fine for 
a desktop monitor in landscape orientation, it’s clear that it is ill-suited to a mobile 
device. 

What this website requires is a design that is not only specifically tailored to the 
needs of her mobile users but also is easily revised for tablet and desktop devices. This 
can be accomplished with responsive design in which the design of the document 
changes in response to the device rendering the page. An important leader in the 
development of responsive design is Ethan Marcotte, who identified three primary 
components of responsive design theory: 


e flexible layout so that the page layout automatically adjusts to screens of different widths 

® responsive images that rescale based on the size of the viewing device 

¢ media queries that determine the properties of the device rendering the page so that 
appropriate designs can be delivered to specific devices 


In the preceding tutorials, you’ve seen how to create grid-based fluid layouts and 
you've used images that scaled based on the width of the browser window and web 
page. In this session, you'll learn how to work with media queries in order to create a 
truly responsive website design. 


Introducing Media Queries 


Media queries are used to associate a style sheet or style rule with a specific device or 
list of device features. To create a media query within an HTML file, add the following 
media attribute to either the link or style element in the document head 


media="devices" 
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where devices is a comma-separated list of supported media types associated with a 
specified style sheet. For example, the following 1ink element accesses the output.css 
style sheet file but only when the device is a printer or projection device: 


<link href="output.css" media="print, projection" /> 


If any other device accesses this web page, it will not load the output.css style sheet 
file. Figure 5—3 lists other possible media type values for the media attribute. 


Media types 
Media Type Used For 
all All output devices (the default) 
braille Braille tactile feedback devices 
embossed Paged Braille printers 
handheld Mobile devices with small screens and limited bandwidth 
print Printers 
projection Projectors 
screen Computer screens 
speech Speech and sound synthesizers, and aural browsers 
tty Fixed-width devices such as teletype machines and terminals 
tv Television-type devices with low resolution, color, and limited scrollability 


When no media attribute is used, the style sheet is assumed to apply to all devices 
accessing the web page. 


The @media Rule 


Media queries can also be used to associate specific style rules with specific devices by 
including the following @media rule in a CSS style sheet file 


@media devices { 
style rules 


} 


where devices are supported media types and style rules are the style rules 
associated with those devices. For example, the following style sheet is broken into 
three sections: an initial style rule that sets the font color of all h1 headings regardless 
of device, a second section that sets the font size for h1 headings on screen or 
television devices, and a third section that sets the font size for h1 headings that are 
printed: 


h1 { 
color: red; 
} 
@media screen, tv { 
hi {font-size: 2em;} 
} 
@media print { 
h1 {font-size: 16pt;} 


} 


Note that in this style sheet, the font size for screen and television devices is expressed 
using the relative em unit but the font size for print devices is expressed using points, 
which is a more appropriate sizing unit for that medium. 
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Finally, you can specify media devices when importing one style sheet into another 
by adding the media type to the @import rule. Thus, the following CSS rule imports the 
screen.css file only when a screen or projection device is being used: 


@import url("screen.css") screen, projection; 


The initial hope was that media queries could target mobile devices using the handheld 
device type; however, as screen resolutions improved to the point where the cutoff 
between mobile, tablet, laptop, and desktop was no longer clear, media queries began to 
be based on what features a device supported and not on what the device was called. 


Media Queries and Device Features 


To target a device based on its features, you add the feature and its value to the media 
attribute using the syntax: 


media="devices and | or (feature:value)" 


where feature is the name of a media feature and value is the feature’s value. The 
and and or keywords are used to create media queries that involve different devices or 
different features, or combinations of both. 

The @media and @import rules employ similar syntax: 


@media devices and|or (feature:value) { 
style rules 


} 
and 
@import url(url) devices and|or (feature: value) ; 


For example, the following media query applies the style rules only for screen devices 
with a width of 320 pixels. 


@media screen and (device-width: 320px) { 
style rules 


} 
Figure 5—4 provides a list of the device features supported by HTML and CSS. 


Figure 5-4 Media features 


Feature 


aspect-ratio 


Description 


The ratio of the width of the display area to its height 
color The number of bits per color component of the output device; if the 
device does not support color, the value is 0 


color-index The number of colors supported by the output device 


device-aspect-ratio 
device-height 
device-width 

height 

monochrome 


orientation 


resolution 


width 


The ratio of the device-width value to the device-height value 
The height of the rendering surface of the output device 

The width of the rendering surface of the output device 

The height of the display area of the output device 

The number of bits per pixel in the device’s monochrome frame buffer 


The general description of the aspect ratio: equal to portrait when 
the height of the display area is greater than the width; equal to 
landscape otherwise 


The resolution of the output device in pixels, expressed in either dpi 
(dots per inch) or docm (dots per centimeter) 


The width of the display area of the output device 
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If you specify a feature 
without specifying a 
device, the media query 
will apply to all devices. 


All of the media features in Figure 5-4, with the exception of orientation, 
also accept min- and max- prefixes, where min- provides a minimum value for the 
specified feature, and max- provides the feature’s maximum value. Thus, the following 
media query applies style rules only for screen devices whose width is at most 700 
pixels: 


@media screen and (max-width: 700px) { 
style rules 


} 


Similarly, the following media query applies style rules only to screens that are at 
least 400 pixels wide: 


@media screen and (min-width: 400px) { 
style rules 


} 


You can combine multiple media features using logical operators such as and, not, 
and or. The following query applies the enclosed styles to all media types but only 
when the width of the output devices is between 320 and 480 pixels (inclusive): 


@media all and (min-width: 320px) and (max-width: 480px) { 
style rules 


} 


Some media features are directed toward devices that do not have a particular 
property or characteristic. This is done by applying the not operator, which negates 
any features found in the expression. For example, the following query applies only to 
media devices that are not screen or do not have a maximum width of 480 pixels: 


@media not screen and (max-width: 480px) { 
style rules 


} 


For some features, you do not have to specify a value but merely indicate the 
existence of the feature. The following query matches any screen device that also 
supports color: 


@media screen and (color) { 
style rules 


} 


Finally, for older browsers that do not support media queries, CSS provides the only 
keyword to hide style sheets from those browsers. In the following code, older browsers 
will interpret only as an unsupported device name and so will not apply the enclosed 
style rules, while newer browsers will recognize the keyword and continue to apply the 
style rules. 


@media only screen and (color) { 
style rules 


} 


All current browsers support media queries, but you will still see the only keyword 
used in many website style sheets. 
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Creating a Media Query 


¢ To create a media query that matches a device in a link or style element within an 
HTML file, use the following media attribute 


media="devices andlor (feature:value)" 


where devices is a comma-separated list of media types, feature is the name of a 
media feature, and value is the feature’s value 
¢ To create a media query, create the following @media rule within a CSS style sheet 


REFERENCE 


@media devices and|or (feature:value) { 
style rules 


} 


where style rules are the style rules applied for the specified device and feature. 
¢ To importa style sheet based on a media query, apply the following @import rule 
within a CSS style sheet 


@import url(url) devices and|or (feature:value) ; 


Applying Media Queries to a Style Sheet 


You meet with Marjorie to discuss her plans for the home page redesign. She envisions 
three designs: one for mobile devices, a different design for tablets, and finally a design 
for desktop devices based on the current appearance of the site’s home page (see 
Figure 5-5). 


Trusted Friends home page for different screen widths 


Opx 480px 768px 


© Robert Kneschke/Shutterstock.com; © dotshock/Shutterstock.com; BenBois/openclipart; JMLevick/openclipart; 
Easy/openclipart 
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The mobile design will be used for screen widths up to 480 pixels, the tablet design 
will be used for widths ranging from 481 pixels to 768 pixels, and the desktop design 
will be used for screen widths exceeding 768 pixels. To apply this approach, you'll 
create a style sheet having the following structure: 


/* Base Styles */ 
style rules 


/* Mobile Styles */ 
@media only screen and (max-width: 480px) { 
style rules 


} 


/* Tablet Styles */ 
@media only screen and (min-width: 481px) { 
style rules 


} 


/* Desktop Styles */ 
@media only screen and (min-width: 769px) { 
style rules 


} 


Note that this style sheet applies the principle mobile first in which the overall page 
design starts with base styles that apply to all devices followed by style rules specific 
to mobile devices. Tablet styles are applied when the screen width is 481 pixels or 
greater, and desktop styles build upon the tablet styles when the screen width exceeds 
768 pixels. Thus, as your screen width increases, you add on more features or replace 
features found in smaller devices. In general, with responsive design, it is easier to add 
new styles through progressive enhancement than to replace styles. 

Marjorie has supplied you with the HTML code and initial styles for her website's 
home page. Open her HTML file now. 


To open the site’s home page: 


D 1. Use your editor to open the tf_home_txt.html and tf_styles1_txt.css 
files from the html05 » tutorial folder. Enter your name and the date in 
the comment section of each file and save them as tf_home.html and 
tf_styles1.css respectively. 


D 2. Return to the tf_home.html file in your editor and, within the document 
head, create links to the tf_reset.css and tf_styles1.css style sheet files. 


BD 3. Take some time to scroll through the contents of the document to become 
familiar with its contents and structure and then save your changes to the file, 
but do not close it. 


Next, youll insert the structure for the responsive design styles in the tf_styles1.css 
style sheet, adding sections for mobile, tablet, and desktop devices. 


To add media queries to a style sheet: 
BD 1. Return to the tf_styles.css file in your editor. 


BD 2. Marjorie has already inserted the base styles that will apply to all devices at 
the top of the style sheet file. Take time to review those styles. 
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BD 3. Scroll to the bottom of the document and add the following code and 
comments after the New Styles Added Below comment. 


Mobile Styles: Opx to 480px 


my 


Tablet Styles: 48lpx and greater 


y/ 


Desktop Styles: 769px and greater 


/ 
@media only screen and (min-width: 769px) { 


} 


Figure 5-6 highlights the media queries in the style sheet file. 


Figure 5-6 Creating media queries for different screen widths 


screen devices with a 


media query matching { 
maximum width of 480 pixels 


media query matching 
screen devices with a 
minimum width of 481 pixels 


media query matching 
screen devices with a 
minimum width 769 pixels 


BD 4. Save your changes to the file. 
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The media queries you've written are based on the screen width. However, before 
you can begin writing styles for each media query, you have to understand how those 
width values are interpreted by your browser. 


Exploring Viewports and Device Width 


Web pages are viewed within a window called the viewport. For desktop computers, 
the viewport is the same as the browser window; however, this is not the case with 
mobile devices. Mobile devices have two types of viewports: a visual viewport 
displaying the web page content that fits within a mobile screen and a layout viewport 
containing the entire content of the page, some of which may be hidden from the user. 

The two viewports exist in order to accommodate websites that have been written 
with desktop computers in mind. A mobile device will automatically zoom out of a 
page in order to give users the complete view of the page’s contents, but as shown 
earlier in Figure 5-2, this often results in a view that is too small to be usable. While 
the user can manually zoom into a page to make it readable within the visual viewport, 
this is done at the expense of hiding content, as shown in Figure 5-7. 


Figure 5-7 Comparing the visual and layout viewports 


visual viewport 


layout viewport 


© Robert Kneschke/Shutterstock.com; BenBois/openclipart 


Notice in the figure how the home page of the Trusted Friends website has been 
zoomed in on a mobile device so that only part of the page is displayed within the 
visual viewport and the rest of the page, which is hidden from the user, extends into the 
layout viewport. 

Widths in media queries are based on the width of the layout viewport, not the 
visual viewport. Thus, depending on how the page is scaled, a width of 980 pixels 
might match the physical width of the device as shown in Figure 5-2 or it might extend 
beyond it as shown in Figure 5—7. In order to correctly base a media query on the 
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physical width of the device, you have to tell the browser that you want the width of 
the layout viewport matched to the device width by adding the following meta element 
to the HTML file: 


<meta name="viewport" content="properties" /> 


where properties is a comma-separated list of viewport properties and their values, 
as seen in the example that follows: 


<meta name="Vviewport" 
content="width=device-width, initial-scale=1" /> 


In this meta element, the device-width keyword is used to set the width of the 
layout viewport to the physical width of the device’s screen. For a mobile device, 
this command sets the width of the layout viewport to the width of the device. The 
line initial-scale=1 is added so that the browser doesn’t automatically zoom out 
of the web page to fit the page content within the width of the screen. We want the 
viewport to match the device width, which is what the above meta element tells the 
browser to do. 


Configuring the Layout Viewport 


¢ To configure the properties of the layout viewport for use with media queries, add the 
following meta element to the HTML file 


<meta name="Vviewport" content="properties" /> 


where properties is a comma-separated list of viewport properties and their values. 
e To size the layout viewport so that it matches the width of the device without 
rescaling, use the following viewport meta element 


<meta name="Vviewport" 
content="width=device-width, initial-scale=1" /> 


Add the viewport meta element to the tf_home.html file now, setting the width of the 
layout viewport to match the device width and the initial scale to 1. 


To define the visual viewport: 
BD 1. Return to the tf_home.html file in your editor. 


DB 2. Below the meta element that defines the character set, insert the following 
HTML tag: 


<meta name="viewport" 
content="width=device-width, initial-scale=1" /> 


Figure 5-8 highlights the code for the viewport meta element. 
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Setting the properties of the viewport 


sets the width of the 
layout viewport to the 


width of the device 


<titlesTrusted Friends Daycare</title> 
meta charset="utf-8" /> 

<meta name="viewport" content="width=device-width, initial-scale=1" /> 
link href="tf_reset.css" rel="stylesheet" /> 

<link href="tf_ 

</head> 


page does not 
automatically zoom 
out when the page 
is initially opened 

by the browser 


“ y 


stylesl.css" rel="stylesheet 


BD 4. Save your changes to the file. 


D 5. Open the tf_home.html file in your browser. Figure 5-9 shows the initial 
design of the page. 


Mobile layout of the Trusted Friends home page 


company 
logo 


submenu title 


submenu 


navigation 
menu 


main article 


| we struceire fine cages orescence e 


ea ats amin deli Tour er to learn more about our facies and 


aside 
comments 
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Now that you've set up the media queries and configured the viewport, you can 
work on the design of the home page. You'll start by designing for mobile devices. 


Not All Pixels Are Equal 


While pixels are a basic unit of measurement in web design, there are actually two 
types of pixels to consider as you design a website. One is a device pixel, which 
refers to the actual physical pixel on a screen. The other is a CSS pixel, which is the 
fundamental unit in CSS measurements. The difference between device pixels and 
CSS pixels is easiest to understand when you zoom into and out of a web page. For 
example, the following style creates an aside element that is 300 CSS pixels wide: 


aside: {width: 300px; } 


However, the element is not necessarily 300 device pixels. If the user zooms into 
the web page, the apparent size of the article increases as measured by device pixels 
but remains 300 CSS pixels wide, resulting in 1 CSS pixel being represented by several 
device pixels. 

The number of device pixels matched to a single CSS pixel is known as the device- 
pixel ratio. When a page is zoomed at a factor of 2x, the device-pixel ratio is 2, with a 
single CSS pixel represented by a 2x2 square of device pixels. 

One area where the difference between device pixels and CSS pixels becomes 
important is in the development of websites optimized for displays with high device- 
pixel ratios. Some mobile devices are capable of displaying images with a device 
pixel ratio of 3, resulting in free crisp and clear images. Designers can optimize their 
websites for these devices by creating one set of style sheets for low-resolution displays 
and another for high-resolution displays. The high-resolution style sheet would load 
extremely detailed, high-resolution images, while the low-resolution style sheet would 
load lower resolution images better suited to devices that are limited to smaller device- 
pixel ratios. For example, the following media query 


<iliiale Inictene="iesieaine ces” imelaligryvilesinaeie! 
media="only screen and (-webkit-min-device-pixel-ratio: 2) " /> 


loads the retina.css style sheet file for high-resolution screen devices that have device- 
pixel ratios of at least 2. Note that currently the device-pixel-ratio feature is a 
browser-specific extension supported only by WebKit. 


Creating a Mobile Design 


A mobile website design should reflect how users interact with their mobile devices. 
Because your users will be working with a small handheld touchscreen device, one 
key component in your design is to have the most important information up-front and 
easily accessible, which means your home page on a mobile device needs to be free of 
unnecessary clutter. Another important principle of designing for mobile devices is that 
you should limit the choices you offer to your users. Ideally, there should only be a few 
navigation links on the screen at any one time. 

With these principles in mind, consider the current layout of the Trusted Friends 
home page shown in Figure 5-9. The content is arranged within a single column 
providing the maximum width for the text and images, but an area of concern for 
Marjorie is the long list of hypertext links, which forces the user to scroll vertically 
down the page to view information about the center. Most mobile websites deal with 
this issue by hiding extensive lists of links in pulldown menus, appearing only in 
response to a tap of a major heading in the navigation list. You'll use this technique for 
the Trusted Friends home page. 
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Creating a Pulldown Menu with CSS 


Marjorie has already laid the foundation for creating a pulldown menu in her HTML 
code. Figure 5-10 shows the code used to mark the contents of the navigation list in 
the body header. 


Figure 5-10 Submenus in the navigation list 


: uN submenu titles 


me. html" >Home a 4 
a href="#" class="submenuTitle">Classes &#96! 
1 1 -p menu 
li><a href="#">Infants</a></1li 
l a href="8">Toddlers</a></1i 
I a} f="tf_prek.html">Pre-K</a></li 
l a hrefe"s">after School</a li 
ul 
ld 
@ hret="8" class="submenuTitle”">Parents &#9¢ 
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nested submenu + . ~ ’ : > ee 
lists associated with 14 ty “ 
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J 
i 
@ href="#" class="submenuTitle">About Us &# 4; 
ul class="subme 
li ah "sHistory ’ li 
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Marjorie has created a navigation bar that includes topical areas named Classes, 
Parents, and About Us. Within each of these topical areas are nested lists containing 
links to specific pages on the Trusted Friends website. Marjorie has put each of these 
nested lists within a class named submenu. So, first you'll hide each of these submenus 
to reduce the length of the navigation list as it is rendered within the user’s browser. 
You'll place this style rule in the section for Base Styles because it will be used by both 
mobile and tablet devices (but not by desktop devices as you'll see later). 


To hide a submenu: 
D 1. Return to the tf_styles1.css file in your editor. 
BD 2. Scroll to the Pulldown Menu Styles section and add the following style rule: 


ul.submenu { 
display: none; 


} 


Figure 5-11 highlights the styles to hide the navigation list submenus. 
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Figure 5-11 Hiding the navigation list submenus 


ul.submenu { 
isplay: none; 


prevents the submenu 
unordered lists from 
being displayed 


BD 3. Save your changes to the file and then reload the tf_home.html file in your 
browser. Verify that the navigation list no longer shows the contents of the 
submenus but only the Home, Classes, Parents, About Us, and Contact Us 
links. See Figure 5-12. 


Figure 5-12 Navigation list with hidden submenus 


- 


mw Trusted fnends daycare 


HOME 


submenu lists io 
are hidden [4 


» } 
Trusted Friends Daycare provides childhood education and daycare, conveniently 
located for you and your child. We treat each child based on his or her own 
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Next, you want to display a nested submenu only when the user hovers the mouse 
pointer over its associated submenu title, which for this page are the Classes, Parents, 
and About Us titles. Because the submenu follows the submenu title in the HTML file 
(see Figure 5-10), you can use the following selector to select the submenu that is 
immediately preceded by a hovered submenu title: 


a.submenuTitle:hover+ul.submenu 


However, this selector is not enough because you want the submenu to remain visible 
as the pointer moves away from the title and hovers over the now-visible submenu. So, 
you need to add ul. submenu: hover to the selector: 


a.submenuTitle:hover+ul.submenu, ul.submenu:hover 
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To make the submenu visible, you change its display property back to block, resulting 
in the following style rule: 


a.submenuTitle:hover+ul.submenu, ul.submenu:hover { 
display: block; 


} 


You may wonder why you don’t use only the ul. submenu: hover selector. The 
reason is that you can’t hover over the submenu until it’s visible and it won’t be visible 
until you first hover over the submenu title. Add this rule now to the tf_styles1.css style 
sheet and test it. 


To redisplay the navigation submenus: 
BD 1. Return to the tf_stylest.css file in your editor. 
BD 2. Add the following style rule to the Pulldown Menu Styles section: 


a.submenuTitle:hover+ul.submenu, ul.submenu:hover { 
display: block; 


} 


Figure 5-13 highlights the styles to display the navigation list submenus. 


Displaying the hidden submenus 


selects the now-visible 


submenu as it’s being 
hovered over 


selects the submenu that is 
preceded by a hovered-over 
submenu title 


§. SubmenuTit Leshover+ul. submenu, .Ssubmenuthover { 
makes the submenu visible fisplay: block; 
by changing the display 
property to block 


BD 3. Save your changes to the file and then reload the tf_home.html file in your 
browser. Hover your mouse pointer over each of the submenu titles and 
verify that the corresponding submenu becomes visible and remains visible 
as you move the mouse pointer over its contents. 


Figure 5-14 shows the revised appearance of the navigation list using the 
pulldown menus. 
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Figure 5-14 Displaying the contents of a pulldown menu 


trusted fnends daycare 


HOME 


PARENTS > 
hovering over the === ay 
submenu title displays 
the corresponding 


submenu list 


© Robert Kneschke/Shutterstock.com 


The hover event is used with mouse pointers on desktop computers, but it has a 
different interpretation when applied to mobile devices. Because almost all mobile 
devices operate via a touch interface, there is no hovering. A mobile browser will 
interpret a hover event as a tap event in which the user taps the page object. When 
the hover event is used to hide an object or display it (as we did with the submenus), 
mobile browsers employ a double-tap event in which the first tap displays the page 
object and a second tap, immediately after the first, activates any hypertext links 
associated with the object. To display the Trusted Friends submenus, the user would tap 
the submenu title and to hide the submenus the user would tap elsewhere on the page. 

To test the hover action, you need to view the Trusted Friends page on a mobile 
device or a mobile emulator. 


Testing Your Mobile Website 


The best way to test a mobile interface is to view it directly on a mobile device. 
However, given the large number of mobile devices and device versions, it’s usually not 
practical to do direct testing on all devices. An alternative to having the physical device 
is to emulate it through a software program or an online testing service. Almost every 
mobile phone company provides a software development kit or SDK that developers 
can use to test their programs and websites. Figure 5-15 lists some of the many mobile 
device emulators available on the web at the time of this writing. 


Netty” HTML 5 and CSS | Tutorial 5 Designing for the Mobile Web 


Figure 5-15 Popular device emulators 


Mobile Emulator Description 

Android SDK Software development kit for Android developers 
(developer.android.com/sdk) 

iOS SDK Software development kit for iPhone, iPad, and other iOS devices 
(developer.apple.com) 

Mobile Phone Emulator Online emulation for a variety of mobile devices 
(www.mobilephoneemulator.com) 

Mobile Test Me Online emulation for a variety of mobile devices (mobiletest.me) 

Opera Mobile SDK Developer tools for the Opera Mobile browser 


(www.opera.com/developer) 


Browsers are also starting to include device emulators as part of their developer 
tools. You will examine the device emulator that is supplied with the Google Chrome 
browser and use it to view the Trusted Friends home page under a device of your 
choosing. If you don’t have access to the Google Chrome browser, review the steps that 
follow and apply them to the emulator of your choice. 


Viewing the Google Chrome device emulator: 


» 1. 


» 2. 


Return to the tf_home.html file in the Google Chrome browser and press 
F12 to open the developer tools pane. 


If necessary, click the device icon | | located at the top of the developer 
pane to display the device toolbar. 


Select a device of your choosing from the drop-down list of devices on the 
developer toolbar. 


Refresh or reload the web page to ensure that the display parameters of your 
selected device are applied to the rendered page. 


The emulator also allows you to view the effect of changing the orientation of 
the phone from portrait to landscape. 


Click the rotate button |) located on the device toolbar to switch to 
landscape orientation. Click the rotate button again to switch back to 
portrait mode. 


Google Chrome’s device emulator can also emulate the touch action. The 
touch point is represented by a semitransparent circle @. 


Move the touch point over Classes, Parents, or About Us and verify that 
when you click (tap) the touch point on a submenu title the nested submenu 
contents are displayed. 


Verify that you when you click elsewhere in the page the submenu contents 
are hidden. 


Figure 5-16 shows the effect of opening a submenu with the touch emulator. 
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Figure 5-16 Using the Google Chrome device emulator tool 
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BD 8. Continue to explore Google Chrome’s device emulators, trying out different 
combinations of devices and screen orientations. Press F12 again to close 
the developer window. 


An important aspect of mobile design is optimizing your site’s performance under 
varying network conditions. Thus, in addition to emulating the properties of the mobile 
device, Google Chrome’s device emulator can also emulate network connectivity. 

Marjorie wants to increase the font size of the links in the navigation list to make 
them easier to access using touch. She also wants to hide the customer comments that 
have been placed in the aside element (because she doesn’t feel this will be of interest 
to mobile users). Because these changes only apply to the mobile device version of the 
page, you'll add the style rules within the media query for mobile devices. 


To hide the customer comments: 


D 1. Return to the tf_styles1.css file in your editor and go to the Mobile Styles 
section. 


Dd 2. 


nav.horizontal a { 
font-size: 1.5em; 
line-height: 2.2em; 
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BD 3. Add the following style rule to hide the aside element (once again indented 
from the surrounding media query): 


aside { 
display: none; 


} 


Figure 5-17 highlights the style rules in the media query for mobile devices. 


Figure 5-17 Hiding the aside element for mobile devices 
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BD 4. Save your changes to the file and then reload the tf_home.html file in your 
browser. Reduce the width of the browser window to 480 pixels or below (or 
view the page in your mobile emulator). Verify that the customer comments 
are no longer displayed on the web page and that the size of the navigation 
links has been increased. 


Figure 5-18 shows the final design of the mobile version. 
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Figure 5-18 Final design of the mobile version of the home page 
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Now that you’ve completed the mobile design of the page, you'll start to work on 
the design for tablet devices. 


Creating a Tablet Design 


Under the media query you've set up, your design for tablet devices will be applied for 
screen widths greater than 480 pixels. The pulldown menu you created was part of the 
base styles, so it is already part of the tablet design; however, with the wider screen, 
Marjorie would like the submenus displayed horizontally rather than vertically. You can 
accomplish this by adding a style rule to the tablet media query to float the submenus 
side-by-side. 


To begin writing the tablet design: 


BD 1. Return to the tf_styles1.css file in your editor and scroll down to the media 
query for the tablet styles. 
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D 2. Within the media query, add the following style to float the five list items, 
which are direct children of the main menu, side-by-side. Set the width of 
each list item to 20% of the total width of the main menu. 


ul.mainmenu > 1i { 
float: left; 
width: 20%; 


} 


BD 3. Double the widths of the submenus so that they stand out better from the 
main menu titles by adding the following style rule. 


ul.submenu { 
width: 200%; 


} 


Figure 5-19 highlights the style rule within the media query for tablet 
devices. 


Figure 5-19 Formatting the navigation menus for tablet devices 
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BD 4. Save your changes to the style sheet and then reload the tf_home.html file in 
your web browser. 


D 5. Increase the width of the browser window beyond 480 pixels to switch from 
the mobile design to the tablet design. Verify that the submenu titles are 
now laid out horizontally and that if you hover your mouse pointer over the 
submenu titles, the contents of the submenu are made visible on the screen. 
See Figure 5-20. 


Tutorial 5 Designing for the Mobile Web | HTML 5 and CSS (aby Titi) 


Figure 5-20 Pulldown menus for the tablet layout 
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BD 6. Scroll down as needed and note that the customer comments now appear 
at the bottom of the page because they were only hidden for the mobile 
version of this document. 


Marjorie notices that opening the submenus pushes the subsequent page content 
down to make room for the submenu. She prefers the submenus to overlay the page 
content. You can accomplish this by placing the submenus with absolute positioning. 
Remember that objects placed with absolute positioning are removed from the 
document flow and thus, will overlay subsequent page content. To keep the submenus 
in their current position on the page, you'll make each main list item a container for its 
submenu by setting its position property to relative. Thus, each submenu will be 
placed using absolute positioning with its main list item. You will not need to set the top 
and left coordinates for these items because you'll use the default value of 0 for both. 
Because the submenus will overlay page content, Marjorie suggests you add a drop 
shadow so, when a submenu is opened, it will stand out more from the page content. 


To position the navigation submenus: 
BD 1. Return to the tf_styles1.css style sheet in your editor. 


D 2. Locate the style rule for the ul.mainmenu > 1i selector in the Tablet Styles 
section and add the following style: 


position: relative; 
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BD 3. Add the following style to the ul . submenu selector in the Tablet Styles 
section: 


box-shadow: rgb(51, 51, 51) 5px 5px 15px; 
position: absolute; 


Figure 5-21 highlights the new styles. 


Figure 5-21 Placing the pulldown menus with absolute positioning 
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BD 4. Save your changes to the style sheet and then reload the tf_home.htm file in 
your web browser. 


D 5. Verify that when you open the pulldown menus, the subsequent page 
content is not shifted downward. Figure 5-22 highlights the final design for 
the tablet version of the home page. 


Figure 5-22 Revised design of the pulldown menus 
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You'll complete your work on the home page by creating the desktop version of the 
page design. 


Creating a Desktop Design 


Some of the designs that will be used in the desktop version of the page have already 
been placed in the Base Styles section of the tf_styles1.css style sheet. For example, the 
maximum width of the web page has been set to 1024 pixels. For browser windows 
that exceed that width, the web page will be displayed on a fixed background image of 
children playing. Other styles are inherited from the style rules for tablet devices. For 
example, desktop devices will inherit the style rule that floats the navigation submenus 
alongside each other within a single row. All of which illustrates an important principle 
in designing for multiple devices: don’t reinvent the wheel. As much as possible allow 
your styles to build upon each other as you move to wider and wider screens. 

However, there are some styles that you will have to implement only for desktop 
devices. With the wider screen desktop screens, you don’t need to hide the submenus 
in a pulldown menu system. Instead you can display all of the links from the navigation 
list. You'll change the submenu background color to transparent so that it blends in 
with the navigation list and you'll remove the drop shadows you created for the tablet 
design. The submenus will always be visible, so you'll change their display property 
from none to block. Finally, you'll change their position to relative because you no 
longer want to take the submenus out of the document flow and you'll change their 
width to 100%. Apply the styles now to modify the appearance of the submenus. 


To start working on the desktop design: 


D 1. Return to the tf_styles1.css style sheet in your editor and within the media 
query for devices with screen widths 769 pixels or greater insert the following 
style rule to format the appearance of the navigation submenus. 


ul.submenu { 
background: transparent; 
box-shadow: none; 
display: block; 
position: relative; 
width: 100%; 


} 


BD 2. The navigation list itself needs to expand so that it contains all of its floated 
content. Add the following style rule to the media query for desktop devices: 


nav.horizontal::after { 
clear: both; 
content: ™™; 
display: table; 


} 


Finally with no hidden submenus, there is no reason to have a submenu title. 
Add the following style rule to remove the submenu titles: 


- 
se 


nav-horizontal a.submenuTitle { 
display: none; 


} 


Figure 5-23 highlights the new style rules in the desktop media query. 
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Adding design styles for the browser background and page body 
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With a wider screen, you want to order to avoid long lines of text, which are difficult 
to read. Modify the layout of the desktop design so that the main article and the 
customer comments are floated side-by-side within the same row. 


To change the layout of the article and aside elements: 


BD 1. Within the media query for desktop devices, add the following style rules to 
float the article and aside elements: 


article { 
float: left; 
margin-right: 5%; 
width: 55%; 


} 
aside { 
float: left; 
width: 40%; 
} 


Figure 5-24 highlights the final style rules in the desktop media query. 
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Figure 5-24 Styles for the article and aside elements 
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BD 2. Save your changes to the style sheet and then reload tf_home.html in your 


browser. 


Figure 5-25 shows the final appearance of the desktop design. 
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BD 3. Resize your web browser and verify that as you change the browser window 
width, the layout changes from the mobile to the tablet to the desktop 


design. 
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You show the final design of the home page to Marjorie. She is pleased by the 
changes you’ve made and likes that the page’s content and layout will automatically 
adapt to different screen widths. 


, 


Q 
G_-Problem Solving: Optimizing Your Site for the Mobile Web 
a The mobile browser market is a rapidly evolving and growing field with more new 
SM = devices and apps introduced each month. Adapting your website for the mobile web 
o is not a luxury, but a necessity. 
A good mobile design matches the needs of consumers. Mobile users need quick 


access to main sources of information without a lot of the extra material often found 
in the desktop versions of their favorite sites. Here are some things to keep in mind as 
you create your mobile designs: 


¢ Keep it simple. To accommodate the smaller screen sizes and slower connection 
speeds, scale down each page to a few key items and articles. Users are looking for 
quick and obvious information from their mobile sites. 

e Resize your images. Downloading several images can bring a mobile device to a 
crawl. Reduce the number of images in your mobile design, and use a graphics 
package to resize the images so they are optimized in quality and sized for a smaller 
screen. 

¢ Scroll vertically. Readers can more easily read your page when they only have to 
scroll vertically. Limit yourself to one column of information in portrait orientation 
and two columns in landscape. 

¢ Make your links accessible. Clicking a small hypertext link is extremely difficult to 
do on a mobile device with a touch screen interface. Create hypertext links that are 
easy to locate and activate. 


Above all, test your site on a variety of devices and under different conditions. 
Mobile devices vary greatly in size, shape, and capability. What works on one device 
might fail utterly on another. Testing your code on a desktop computer is only the first 
step; you may also need access to the devices themselves. Even emulators cannot 
always capture the nuances involved in the performance of an actual mobile device. 


You’ve completed your work on the design of the Trusted Friends home page with 
a style sheet that seamlessly transitions between mobile, tablet, and desktop devices. 
In the next session, you'll explore how to use flexible boxes to achieve a responsive 
design. 
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" Session 5.1 Quick Check 


1. Which of the following is not a part of responsive design theory? 
a. flexible layouts 
b. pulldown menus 
c. image rescaling 
d. media queries 


2. Which attribute do you add to a link element for aural browsers? 


REVIEW 


a. media = "aural" 
b. type = "aural" 

Cc. media = "speech" 
d. type = "speech" 


3. What @rule do you use for braille device? 
a. @media braille 
b. @braille true 
C. @type braille 
d. @media nonscreen 


4. What @rule loads style rules for screen devices up to a maximum width of 
780 pixels? 
a. @screen: 780px 
b. @media screen and (width: 780px) 
Cc. @screen and (width <= 780px) 
d. @media screen and (max-width: 780px) 
5. What attribute would you add to a link element for screen devices whose 
width ranges from 480 pixels up to 780 pixels (inclusive)? 
a. media="screen" min-width="480px" min-width="480px" 
b. media="screen and (width=480px - 780px)" 
c. minScreenWidth = "480px" maxScreenWidth = "780px" 
d. media="screen and (min-width: 480px and max-width: 780px)" 
6. In general, what media rules should be listed first in your media queries if you 
want to support mobile, tablet, laptop, and desktop devices? 
a. mobile 
b. tablet 
c. laptop 
d. desktop 
7. Which viewport displays the web page content that fits within mobile screen? 
a. layout 
b. visual 
c. webpage 
d. browser 
8. Which viewport contains the entire content of the page, some of which may be 
hidden from the user? 
a. layout 
b. visual 
c. webpage 
d. browser 
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Session 5.2 Visual Overview: 


To create a flexbox, set 
the display property 
to flex. 


Use the flex property 
to define the size of 
the flex items and 
how they will grow or 
shrink in response to 
the changing size of 
the flexbox. 


The flex-grow value 
specifies how fast the 
item grows above its 


basis size relative to 
other items in the 
flexbox. 


A flexbox contains items 
whose size automatically 
expands or contracts to match 
the dimensions of the box. 


body { 
display: flex; 
flex-flow: row wrap; 
j 
header, footer { 


width: 100%; 
} 


aside { 


flex: 1 1 120px; 


oa jon#mai 
lex: 3 Daa; 


yt 


section#topics { 
display: flex; 
flex-flow: row wrap; 


} 


section#topics article { 
flex: 1 1 200px; 


} 


© dotshock/Shutterstock.com; BenBois/openclipart; JMLevick/openclipart 


To define the 
orientation of the 
flexbox and whether 
items can wrap to a 
new line, apply the 
£lex-flow property. 


The flex-shrink value 
specifies how fast the 
item shrinks below its 
basis size relative to 
other items in the 
flexbox. 


The flex-basis value 
provides the basis or 


initial size of the item 
prior to flexing. 
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Flexible Layouts 
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Introducing Flexible Boxes 


So far our layouts have been limited to a grid system involving floating elements 
contained within a fixed or fluid grid of rows and columns. One of the challenges 
of this approach under responsive design is that you need to establish a different 
grid layout for each class of screen size. It would be much easier to have a single 
specification that automatically adapts itself to the screen width without requiring a 
new layout design. One way of achieving this is with flexible boxes. 


Defining a Flexible Box 


A flexible box or flexbox is a box containing items whose sizes can shrink or grow 
to match the boundaries of the box. Thus, unlike a grid system in which each item 
has a defined size, flexbox items adapt themselves automatically to the size of their 
container. This makes flexboxes a useful tool for designing layouts that can adapt to 
different page sizes. 

Items within a flexbox are laid out along a main axis, which can point in either the 
horizontal or vertical direction. Perpendicular to the main axis is the cross axis, which 
is used to define the height or width of each item. Figure 5-26 displays a diagram of 
two flexboxes with items arranged either horizontally or vertically along the main axis. 


Figure 5-26 Horizontal and vertical flexboxes 
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To define an element as a flexbox, apply either of the following display styles 
display: flex; 

or 
display: inline-flex; 


where a value of flex starts the flexbox on a new line (much as a block element 
starts on a new line) and a value of inline- flex keeps the flexbox in-line with its 
surrounding content. 
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Cross-Browser Flexboxes 


The syntax for flexboxes has gone through major revisions as it has developed from 

the earliest drafts to the latest specifications. Many older browsers employ a different 
flexbox syntax, in some cases replacing the word flex with box or flexbox. The complete 
list of browser extensions that define a flexbox would be entered as: 


display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex: 
display: flex; 


To simplify the code in the examples that follow, you will limit your code to the 
W3C specification. This will cover the current browsers at the time of this writing. 
However, if you need to support older browsers, you may have to include a long list of 
browser extensions for each flex property. 


Setting the Flexbox Flow 


By default, flexbox items are arranged horizontally starting from the left and moving to 
the right. To change the orientation of the flexbox, apply the following flex-direction 


property 
flex-direction: direction; 


where direction is row (the default), column, row-reverse, Or column-reverse. 

The row option lays out the flex items from left to right, column creates a vertical layout 

starting from the top and moving downward, and the row-reverse and 

column-reverse options lay out the items bottom-to-top and right-to-left respectively. 
Flex items will all try to fit within a single line, either horizontally or vertically. But 

if they can’t, those items can wrap to a new line as needed by applying the following 

£lex-wrap property to the flexbox 


flex-wrap: type; 


where type is either nowrap (the default), wrap to wrap the flex items to a new line, 
or wrap-reverse to wrap flex items to a new line starting in the opposite direction 
from the current line. For example, the following style rules create a flexbox in which 
the items are arranged in a column starting from the top and going down with any flex 
items that wrap to the second column starting from the bottom and moving up. 


display: flex; 
flex-direction: column; 
flex-wrap: wrap-reverse; 


Additional items in this flexbox will continue to follow a snake-like curve with the 


cae eS eee third column starting at the top, moving down, and so forth. 


not support the flex- Both the £l1ex-direction and flex-wrap properties can be combined into the 
flow property, so for full following £lex- flow style 

cross-browser support, 

you might use the flex- flex-flow: direction wrap; 


direction and flex- 


weap properties insteadi where direction is the direction of the flex items and wrap defines whether the 


items will be wrapped to a new line when needed. Figure 5-27 shows an example of 
flexboxes laid out in rows and columns in which the flex items are forced to wrap to 

a new line. Note that the column-oriented flexbox uses wrap-reverse to start the new 
column on the bottom rather than the top. 
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Figure 5-27 Flexbox layouts 
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Defining a Flexbox 
¢ To display an element as a flexbox, apply the display style 
display: flex; 


¢ To set the orientation of the flexbox, apply the style 


REFERENCE 


flex-direction: direction; 


where direction is row (the default), column, row-reverse, or column-reverse. 
¢ To define whether or not flex items wrap to a new line, apply the style 


flex-wrap: type; 


where type is either nowrap (the default), wrap to wrap flex items to a new line, or 
wrap-reverse to wrap flex items to a new line starting in the opposite direction from 
the current line. 

¢ To define the flow of items within a flexbox, apply the style 


flex-flow: direction wrap; 


where direction is the direction of the flex items and wrap defines whether the items 
will be wrapped to a new line when needed. 


Marjorie wants you to use flexboxes to design a page she’s created describing the 
pre-k classes offered by Trusted Friends. She has already created the content of the page 
and several style sheets to format the appearance of the page elements. You'll create a 
style sheet that lays out the page content drawing from a library of flexbox styles. 


To open the pre-k page and style sheet: 


BD 1. Use your editor to open the tf_prek_txt.html and tf_flex_txt.css files 
from the html05 » tutorial folder. Enter your name and the date in the 
comment section of each file and save them as tf_prek.html and tf_flex.css 
respectively. 


DB 2. Return to the tf_prek.html file in your editor and, within the document head, 
create links to the tf_reset.css, tf_styles2.css, and tf_flex.css style sheets in 
that order. 
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BD 3. Take some time to scroll through the contents of the document to become 
familiar with its contents and structure and then save your changes to the file, 
leaving it open. 


D 4. Go to the tf_flex.css file in your editor. 


BD 5. Go to the Base Flex Styles section and insert the following style rules to 
display the entire page body as a flexbox oriented horizontally with overflow 
flex items wrapped to a new row as needed: 


body { 
display: flex; 
flex-flow: row wrap; 


} 


Figure 5-28 highlights the new flexbox styles in the style sheet. 


displays the page 
body as a flexbox 
di spl ay: flex; 

flex-flow: row wrap; 


orients the flexbox 
by rows, wrapping to 
a new line as needed 


D 6. Save your changes to the file. 


Now that you've defined the page body as a flexbox, you’Il work with styles that 
define how items within a flexbox expand and contract to match the flexbox container. 


Working with Flex Items 


Flex items behave a lot like floated objects though with several advantages, including 
that you can float them in either the horizontal or vertical direction and that you can 
change the order in which they are displayed. While the size of a flex item can be 
fixed using the CSS width and height properties, they don’t have to be. They can 
also be “flexed”—automatically adapting their size to fill the flexbox. A flex layout is 
fundamentally different from a grid layout and requires you to think about sizes and 
layout in a new way. 


Setting the Flex Basis 


Because flexboxes can When items are allowed to “flex” their rendered size is determined by three properties: 
oer the basis size, the growth value, and the shrink value. The basis size defines the initial 
perce sets citherthe initial  S'Z@ Of the item before the browser attempts to fit it to the flexbox and is set using the 
width or the initial height following flex-basis property 

of the flex item depending 


on the orientation of the flex-basis: size; 


flexbox. 
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where size is one of the CSS units of measurement, a percentage of the size of the 
flexbox, or the keyword auto (the default), which sets the initial size of the flex item 
based on its content or the value of its width or height property. For example, the 
following style rule sets the initial size of the aside element to 200 pixels: 


aside { 
flex-basis: 200px; 


} 


The £lex-basis property should not be equated with the width and height 
properties used with grid layouts; rather, it serves only as a starting point. The actual 
rendered size of the aside element in this example is not necessarily 200 pixels but 
will be based on the size of the flexbox, as well as the size of the other items within the 
flexbox. 


Defining the Flex Growth 


Once the basis size of the item has been defined, the browser will attempt to expand 
the item into its flexbox. The rate at which a flex item grows from its basis size is 
determined by the following £1ex-grow property 


flex-grow: value; 


where value is a non-negative value that expresses the growth of the flex item relative 
to the growth of the other items in the flexbox. The default £1ex-grow value is 0, 
which is equivalent to not allowing the flex item to grow but to remain at its basis size. 
Different items within a flexbox can have different growth rates and the growth rate 
largely determines how much of the flexbox is ultimately occupied by each item. 

Figure 5-29 shows an example of how changing the size of a flexbox alters the size 
of the individual flexbox items. 


Figure 5-29 Growing flex items beyond their basis size 


100px 100px 


flex-basis: 100px; flex-basis: 100px; 
flex-grow: 1; flex-grow: 3; 


both flex items have the same basis size 


150px 250px 


flex-basis: 100px; flex-basis: 100px; 
flex-grow: 1; flex-grow: 3; 


<—____150px —______» 


second item grows at 3x the rate of the first as the flexbox expands 
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In the figure, the basis sizes of the two items are 100 pixels each with the growth 
of the first item set to 1 and the growth of the second item set to 3. The growth values 
indicate that as the flex items expand to fill the flexbox, item1 will increase 1 pixel 
for every 3 pixels that item2 increases. Thus, to fill up the remaining 200 pixels of a 
400-pixel wide flexbox, 50 pixels will be allotted to the first item and 150 pixels will 
be allotted to the second item, resulting in final sizes of 150 pixels and 250 pixels 
respectively. If the width of the flexbox were to increase to 600 pixels, item1 and 
item2 will divide the extra 400 pixels once again in a ratio of 1 to 3. Item1 will have a 
total size of 200 pixels (100px + 100px) and item2 will expand to a size of 400 pixels 
(100px + 300px). 

Notice that unlike a grid layout, the relative proportions of the items under a flex 


If all items have f1ex-grow layout need not be constant. For the layout shown in Figure 5—29, the two items share 


set to 1 and an equal flex the space equally when the flexbox is 200 pixels wide, but at 400 pixels the first item 

basis, they will alwayshave — occupies 37.5% of the box while the second item occupies the remaining 62.5%. 

o aoe SHO NCU AS To keep a constant ratio between the sizes of the flex items, set their basis sizes to 0 
€XDOX. 


pixels. For example, the following style rules will result in a flexbox in which the first 
item is always half the size of the second item no matter how wide or tall the flexbox 
becomes. 


div#item1 { 
flex-basis: Opx; 
flex-grow: 1; 

} 

div#item2 { 
flex-basis: Opx; 
flex-grow: 2; 


} 


One of the great advantages of the flexible box layout is that you don’t need to 
know how many items are in the flexbox to keep their relative proportions the same. 
The following style rule creates a layout for a navigation list in which each list item is 
assigned an equal size and grows at the same rate. 


nav ul { 
display: flex; 

} 

nav ul li { 
flex-basis: Opx; 
flex-grow: 1; 


} 


If there are four items in this navigation list, each will be 25% of the total list size 
and if at a later date a fifth item is added, those items will then be allotted 20% of 
the total size. Thus, unlike a grid layout, there is no need to revise the percentages to 
accommodate new entries in the navigation list; a flexible box layout handles that task 
automatically. 

Note that if the £lex-grow value is set to 0, the flex item will not expand beyond its 
basis size, making that basis value the maximum width or height of the item. 


Defining the Shrink Rate 


What happens when the flexbox size falls below the total space allotted to its flex 
items? There are two possibilities depending on whether the flexbox is defined to wrap 
its contents to a new line. If the £lexbox-wrap property is set to wrap, one or more of 
the flex items will be shifted to a new line and expanded to fill in the available space 
on that line. Figure 5-30 shows a flexbox layout in which three items each have a basis 
size of 200 pixels with the same growth value of 1. 
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Figure 5-30 Shrinking flex items smaller than their basis size 


900px 
flex-basis: 200px; flex-basis: 200px; flex-basis: 200px; 
flex-grow: 1; flex-grow: 1; flex-grow: 1; 
300px 300px 300px 
150px 
500px 
—————— flex-basis: 200px; 
flex-grow: 1; 
flex-basis: 200px; flex-basis: 200px 
flex-grow: 1; flex-grow: 1; 
150px 
SSS 
zee Z20px flex-basis: 200px 
flex-grow: 1; 
flex-basis: 200px; 
flex-grow: 1; 
150px 
—_—_—_—— 
flex-basis: 200px 
flex-grow: 1; 
150px 
————————= 


As shown in the figure, as long as the flexbox is at least 600 pixels wide, the items will 
equally share a single row. However, once the flexbox size falls below 600 pixels, the three 
items can no longer share that row and the last item is wrapped to a new row. Once on that 
new row, it’s free to fill up the available space while the first two items equally share the space 
on the first row. As the flexbox continues to contract, falling below 400 pixels, the first two 
items can no longer share a row and the second item now wraps to its own row. At this point 
the three items fill separate rows and as the flexbox continues to shrink, their sizes also shrink. 

If the flexbox doesn’t wrap to a new line as it is resized, then the flex items will 
continue to shrink, still sharing the same row or column. The rate at which they shrink 
below their basis size is given by the following £1ex-shrink property 


flex-shrink: value; 


where value is a non-negative value that expresses the shrink rate of the flex item 
relative to the shrinkage of the other items in the flexbox. The default £lex-shrink 
value is 1. For example, in the following style rules, item1 and item2 will share the 
flexbox equally as long as the width of the flexbox is 400 pixels or greater. 
div { 
display: flex; 
flex-wrap: nowrap; 
} 
div #item1 { 
flex-basis: 200px; 
flex-grow: 1; 
flex-shrink: 3; 
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div #item2 { 
flex-basis: 200px; 
flex-grow: 1; 
flex-shrink: 1; 


} 


However, once the flexbox falls below 400 pixels, the two items begin to shrink 
with item1 losing 3 pixels for every 1 pixel lost by item2. Note that if the flex-shrink 
value is set to 0, then the flex item will not shrink below its basis value, making that 
basis value the minimum width or height of the item. 


The flex Property 
All of the size values described above are usually combined into the following £lex property 
flex: grow shrink basis; 


where grow defines the growth of the flex item, shrink provides its shrink rate, and 
basis sets the item’s initial size. The default £1ex value is 


flex: 0 1 auto; 


which automatically sets the size of the flex item to match its content or the value of 
its width and height property. The flex item will not grow beyond that size but, if 
necessary, it will shrink as the flexbox contracts. 

The flex property supports the following keywords: 


® auto Use to automatically resize the item from its default size (equivalent to 
flex: 1 1 auto;) 

¢ initial The default value (equivalent to flex: 0 1 auto;) 

® none Use to create an inflexible item that will not grow or shrink (equivalent to 
flex: 0 0 auto;) 

* inherit Use to inherit the flex values of its parent element 


As with other parts of the flex layout model, the £1ex property has gone through several 
syntax changes on its way to its final specification. To support older browsers, use the browser 
extensions: -webkit-box, -moz-box, -ms-flexbox, -webkit-flex, and flex in that order. 


REFERENCE 


Sizing Flex Items 
¢ To set the initial size of a flex item, apply the style 
flex-basis: size; 


where size is measured in one of the CSS units of measurement or as a percentage of 
the size of the flexbox or the keyword auto (the default). 
¢ To define the rate at which a flex item grows from its basis size, apply the style 


flex-grow: value; 


where value is a non-negative value that expresses the growth of the flex item relative 
to the growth of the other items in the flexbox (the default is 0). 
*¢ To define the rate at which a flex item shrinks below its basis value, apply 


flex-shrink: value; 


where value is a non-negative value that expresses the shrink rate of the flex item 
relative to other items in the flexbox (the default is 0). 
¢ To define the overall resizing of a flex item, apply 


flex: grow shrink basis; 


where grow defines the growth of the flex item, shrink provides its shrink rate, and 
basis sets the item's initial size. 
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Applying a Flexbox Layout 


Now that you’ve seen how to size items within a flexbox, you can return to the layout 
for the Pre-K Classes page at Trusted Friends Daycare. The body element, which you 
already set up as a flexbox, has four child elements: the page header, an aside element 
describing the daily class schedule, a sect ion element describing the classes, and 

the page footer. Marjorie wants the header and the footer to always occupy a single 
row at 100% of the width of the page body. For wide screens, she wants the aside 

and section elements displayed side-by-side with one-fourth of the width assigned to 
the aside element and three-fourths to the section element. For narrow screens, she 
wants the aside and section elements displayed within a single column. Figure 5-31 
displays the flex layout that Marjorie wants you to apply. 


Figure 5-31 Proposed flex layout for the Pre-K page 


body header 
Se body header 
aside 
aside main section 
main section 
body footer body footer 
narrow screen wide screen 


Using the techniques of the first session, this would require media queries with one 
grid layout for narrow screens and a second grid layout for wide screens. However, you 
can accomplish the same effect with a single flex layout. First, you set the width of the 
body header and footer to 100% because they will always occupy their own row: 


header, footer { 
width: 100%; 


} 


Then, you set the basis size of the aside and section elements to 120 and 361 
pixels respectively. As long as the screen width is 481 pixels or greater, these two 
elements will be displayed side-by-side; however, once the screen width drops below 
481 pixels, the elements will wrap to separate rows as illustrated in the narrow screen 
image in Figure 5-31. Because you want the main section element to grow at a rate 
three times faster than the aside element (in order to maintain the 3:1 ratio in their 
sizes), you set the £lex-growth values to 1 and 3 respectively. The flex style rules are 


aside { 
flex: 1)1) L20px; 


} 
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section#main { 
flex: 3 1 361px; 


} 


Note that you choose 481 pixels as the total initial size of the two elements to 
match the cutoff point in the media query between mobile and tablet/desktop devices. 
Generally, you want your flex items to follow the media query cutoffs whenever 
possible. Add these style rules to the tf_flex.css style sheet now. 


To define the flex layout: 


BD 1. Within the tf_flex.ess file in your editor, add the following style rules to the 
Base Flex Styles section: 


header, footer { 
width: 100%; 


} 
aside { 

redlepeg al al alAwyeper 
} 


section#main { 
rddlepieQ 6) Al ch(Saljepier 


} 


Figure 5-32 highlights the newly added style rules to define the flex item sizes. 


Set the flex properties of the flex items in the page body 


body { 
display: flex; 


displays the header 
and footer at a width 
of 100%, occupying 
an entire row 


header, footer { 
Beas 100%; 


} 


flex-flow: row wrap; 


} 


@ eae 
sets the initial size of 
ae paca to aside { 
pixels and sets nine 7g 
the growth and shrink Flext 1 1 120px; 


factors to 1 } 
4 


See section#main { 
sets the initial size of flex: 3 1 361px; 
the main section to 
361 pixels and has it } 
grow and shrink at a 
3:1 ratio compared to 
(ie aside element 


BD 2. Save your changes to the file and then open the tf_prek.html file in your web 
browser. 


BD 3. Change the size of the browser window or use the device emulator tools in 
your browser to view the page under different screen widths. As shown in 
Figure 5-33, the layout of the page changes as the screen narrows and widens. 
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Figure 5-33 Flex layout under different screen widths 
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Flexboxes can be nested within one another and a flex item can itself be a flexbox 
for its child elements. Within the topics section, Marjorie has created six articles 
describing different features of the center's pre-k curriculum. She wants these articles to 
share equal space within a row-oriented flexbox, with each article given a basis size of 
200 pixels. The style rules are: 


section#topics { 
display: flex; 
flex-flow: row wrap; 


} 


section#topics article { 
flex: 1 1 200px; 
} 
Marjorie also wants the items in the navigation list to appear in a row-oriented 
flexbox for tablet and desktop devices by adding the following style rules to the media 
query for screen devices whose width exceeds 480 pixels: 


nav.horizontal ul { 
display: flex; 
flex-flow: row nowrap; 


} 


nav.horizontal li { 
flex: 1 1 auto; 


} 


The navigation list items will appear in a single row with no wrapping and the width of 
each item will be determined by the item’s content so that longer entries are given more 
horizontal space. With the growth and shrink values set to 1, each list item will grow and 
shrink at the same rate, keeping the layout consistent across different screen widths. 

Add these style rules now. 
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To lay out the topic articles and navigation list: 
D 1. Return to the tf_flex.css file in your editor and go to the Base Flex Styles 
section. 


BD 2. Add the following style rules to create a flex layout for the page articles. 


section#topics { 
display: flex; 
flex-flow: row wrap; 


} 


section#topics article { 
flex: 1 1 200px; 


} 


Figure 5-34 highlights the style rules for the article topics layout. 


Figure 5-34 Creating a flex layout for articles in the topics section 
displays the topic section section#main { 
as a flexbox flex: 3 1 361px; 


} 


section#topics { 
lisplay: flex; 
flex-flow: row wrap; 


orients the flexbox as a 
row and wraps items to a 
Gee line as needed 


} 


section#topics article { 


(ae the basis size of 
flex: 1 1 200px; 


each article to 200 pixels, 
growing and shrinking at 
ae same rate 


BD 3. Scroll down to the media query for tablet and desktop devices and add the 
following style rule to create a flex layout for the navigation list. (Indent your 
code to set it off from the media query braces.) 


nav.horizontal ul { 
display: flex; 
flex-flow: row nowrap; 


} 


nav.horizontal li { 
flex: 1 1 auto; 


} 


Figure 5-35 highlights the style rules for the navigation list and list items. 


HTML 406 
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Figure 5-35 Creating a flex layout for the navigation list 


@media only screen and (min-width: 481px) { 


fnav.horizontal ul { displays the 


orients the flexbox 
in the row direction 
with no wrapping } 


unordered list 
as a flexbox 


display: flex; 
flex-flow: row nowrap; 


bases the size of each 
item on its content 
and has them grow 
and shrink at the 
same rate 


nav.horizontal li { 
— > flex: 1 1 auto; 


BD 4. Save your changes to the file and reload the tf_prek.html file in your web 


browser. 


D 5. View the page under different screen widths and verify that, for tablet and 


desktop screen widths, the navigation list entries appear in a single row. Also, 
verify that the articles in the topics section flex from a single column layout to 
two or more rows of content. See Figure 5-36. 


Figure 5-36 Flex layout under a desktop screen width 
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Creative Expressions 


If flex items have the 
same order value, they 
are arranged in document 
order. 
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Marjorie likes how using flexboxes has made it easy to create layouts that match a 
wide variety of screen sizes. However, she is concerned that under the single column 
layout used for mobile devices the daily schedule appears first before any description 
of the classes. She would like the daily schedule to appear at the bottom of the page. 
She asks if you can modify the layout to achieve this. 


Reordering Page Content with Flexboxes 


One of the principles of web page design is to, as much as possible, separate the page 
content from page design. However, a basic feature of any design is the order in which 
the content is displayed. Short of editing the content of the HTML file, there is not an 
easy way to change that order. 

That at least was true before flexboxes. Under the flexbox model you can place the 
flex items in any order you choose using the following order property 


order: value; 


where value is an integer where items with smaller order values are placed before 
items with larger order values. For example, the following style arranges the div 
elements starting first with item2, followed by item3, and ending with item1. This is 
true regardless of how those div elements have been placed in the HTML document. 


div#item1 {order: 100; } 
div#item2 {order: -1;} 
div#item3 {order: 5; } 


Note that order values can be negative. The default order value is 0. 
For complete cross-browser support, you can apply the following browser extensions 
with flex item ordering: 


-webkit-box-ordinal-group: value; 
-moz-box-ordinal-group: value; 
-ms-flex-order: value; 
-webkit-order: value; 

order: value; 


Most current browsers support the CSS specifications, so you will limit your code to 
those properties. 


REFERENCE 


Reordering a Flex Item 
¢ To reorder a flex item, apply the style 
jms Wwelllwiey 


where value is an integer where items with smaller order values are placed before 
items with larger order values. 


For mobile devices, Marjorie wants the page header displayed first, followed by the 
main section, the aside element, and ending with the page footer. Add style rules now 
to the mobile device media query in the tf_flex.css style sheet to reorder the flex items. 
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To lay out the topic articles and navigation list: 


BD 1. Return to the tf_flex.css file in your editor and go to the Mobile Devices 
media query. 


BD 2. Add the following style rules, indented to offset them from the braces in the 
media query: 


aside { 
order: 99; 

} 

footer { 
order: 100; 

} 


Note that the other flex items will have a default order value of O and thus 
will be displayed in document order before the aside and footer elements. 


Figure 5-37 highlights the style rules to set the order of the aside and 
footer elements. 


Figure 5-37} Setting the order of a flex item 


@media only screen and (max-width: 480px) { 


places the aside aside {. 
element before order: 99; 
the body footer 


places the body footer { 
footer at the end order: 100; 


of the flexbox 


BD 3. Save your changes to the file and then reload the tf_prek.html file in your 
web browser. 


BD 4. Reduce the width of the browser window below 480 pixels to show the 
mobile layout. Verify that the class schedule now appears at the bottom of 
the file directly before the body footer. 


You've completed the ordering and flex layout of the Pre-K Classes page. You'll 
conclude your review of flexboxes by examining how flex items can be arranged within 
the flexbox container. 
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Exploring Flexbox Layouts 


You can control how flex items are laid out using the justify-content, align- 
items, and align-content properties. You examine each property to see how 
flexboxes can be used to solve layout problems that have plagued web designers for 
many years. 


Aligning Items along the Main Axis 


Recall from Figure 5—26 that flexboxes have two axes: the main axis along which the 

flex items flow and the cross axis, which is perpendicular to the main axis. By default, 
flex items are laid down at the start of the main axis. To specify a different placement, 
apply the following justify-content property 


justify-content: placement; 


where placement is one of the following keywords: 


° flex-start Items are positioned at the start of the main axis (the default). 
° flex-end Items are positioned at the end of the main axis. 
* center Items are centered along the main axis. 


* space-between Items are distributed evenly with the first and last items aligned 
with the start and end of the main axis. 

* space-around __ Items are distributed evenly along the main axis with equal space 
between them and the ends of the flexbox. 


Figure 5-38 shows the impact of different just ify-content values on a flexbox 
oriented horizontally. 


Figure 5-38 Values of the justify-content property 


| LiL 


flex-start flex-end 
center space-between 


space-around 


Remember that, because items can flow in any direction within a flexbox, these 
diagrams will look different for flexboxes under column orientation or when the 
content flows from the right to the left. Note that the justify-content property has 
no impact when the items are flexed to fill the entire space. It is only impactful for flex 
items with fixed sizes that do not fill in the entire flexbox. 
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Aligning Flex Lines 


The align-content property is similar to the justify-content property except that 
it arranges multiple lines of content along the flexbox’s cross axis. The syntax of the 
align-content property is: 


align-content: value; 


where value is one of the following keywords: 


° flex-start Lines are positioned at the start of the cross axis. 

° flex-end Lines are positioned at the end of the cross axis. 

* stretch Lines are stretched to fill up the cross axis (the default). 
® center Lines are centered along the cross axis. 


® space-between Lines are distributed evenly with the first and last lines aligned 
with the start and end of the cross axis. 

© space-around Lines are distributed evenly along the cross axis with equal space 
between them and the ends of the cross axis. 


Figure 5-39 displays the effect of the align-content values on three lines of flex items 
arranged within a flexbox. 


Figure 5-39 Values of the align-content property 
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Note that the align-content property only has an impact when there is more than 
one line of flex items, such as occurs when wrapping is used with the flexbox. 


Aligning Items along the Cross Axis 


Finally, the align-items property aligns each flex item about the cross axis, having the 
syntax 


align-items: value; 
where value is one of the following keywords: 


¢ flex-start Items are positioned at the start of the cross axis. 


° flex-end Items are positioned at the end of the cross axis. 
® center Items are centered along the cross axis. 
* stretch Items are stretched to fill up the cross axis (the default). 


° baseline Items are positioned so that the baselines of their content align. 
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Figure 5—40 displays the effect of the align-items values on three flex items placed 
within a single line. 


Figure 5-40 Values of the align-items property 


Tee 


flex-start flex-end center 


== 


stretch baseline 


Note that the align-items property is only impactful when there is a single line of flex 
items. With multiple lines, you use the align-content property to layout the flexbox 
content. To align a single item out of a line of flex items, use the following align-self 


property 
align-self: value; 


where value is one of the alignment choices supported by the align-items property. 
For example, the following style rule places the footer at the end of the flexbox cross 
axis, regardless of the placement of the other flex items. 


footer { 
align-self: flex-end; 


} 


Both the align-content and align-items properties have a default value of 
stretch so that the flex items are stretched to fill the space along the cross-axis. 
The effect is that all flex items within a row will share a common height. This can be 
observed earlier in Figure 5-36 in which all of the article boxes have the same height, 
regardless of their content. It’s difficult to achieve this simple effect in a grid layout 
unless the height of each item is explicitly defined, but flexboxes do it automatically. 
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Solving the Centering Problem with Flexboxes 


One of the difficult layout challenges in web design is vertically centering an element 
within its container. While there are many different fixes and “hacks” to create vertical 
centering, it has not been easily achieved until flexboxes. By using the justify-content 
and align-items properties, you can center an object or group of objects within a 
flexbox container. For example, the following style rule centers the child elements of the 
div element both horizontally and vertically: 


= 
aS 
© 
— 
2) 
2 
= 


div { 
display: flex; 
justify-content: center; 
align-content: center; 


} 


For a single object or a group of items on a single line within a container, use the 
align-items property as follows: 


div { 
display: flex; 
justify-content: center; 
align-items: center; 


} 


You can also use the align-self property to center one of the items in the flexbox, 
leaving the other items to be placed where you wish. 


Creating a Navicon Menu 


A common technique for mobile websites is to hide navigation menus but to indicate 
their presence with a navicon, which is a symbol usually represented as three 
horizontal lines & , When the user hovers or touches the icon, the navigation menu is 
revealed. 

Marjorie has supplied you with a navicon image that she wants you to use with the 
mobile layout of the Pre-K Classes page. Add this image to the Pre-K Classes web page 
within the navigation list in the body header. 


To insert the navicon image: 
BD 1. Return to the tf_prek.html file in your editor. 


D 2. Directly after the opening <nav> tag in the body header, insert the following 
hypertext link and inline image. 


<a id="navicon" href="#"> 
<img src="tf navicon.png" alt="" /> 
</a> 


Figure 5-41 highlights the code to create the navicon. 
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Figure 5-41 Inserting the navicon 


<nav class="horizontaL"> 

<a id="navicon" href="#"><img src="tf_navicon.png" alt="" /></a> 

<ul> 
<li><a href="tf_home.html">Home</a></1i> 
<li><a href="#">Infants</a></li> 
<li><a href="#">Toddlers</a></1li> 
<li><a href="#" id="currentPage">Pre-K</a></li> 
<li><a href="#">After School</a></1li> 

</ul> 


</nav> 


navicon image 


Next, you'll insert the styles to hide and display the contents of the navigation list 
in a style sheet named tf_navicon.css. You'll apply the same styles for navicon that you 
used in the last session to hide and display the navigation submenus in the Trusted 
Friends home page. As with those menus, you'll use the hover pseudo-class to display 
the navigation list links whenever the user hovers over the navicon, or in the case of 
mobile devices, touches the navicon. Add these styles now. 


To add styles for the navicon image: 


DB 1. Within the document head of the tf_prek.html file, add a link to the 
tf_navicon.css style sheet file after the link for the tf_flex.css file. Save your 
changes to the file. 


D 2. Use your editor to open the tf_navicon_txt.ess files from the html05 » 
tutorial folder. Enter your name and the date in the comment section of the 
file and save it as tf_navicon.css. 


BD 3. By default, the navicon will be hidden from the user. Go to the Base Styles 
section and add the following style rule: 


a#navicon { 
display: none; 


} 


BD 4. The navicon will be displayed only for mobile devices. Go to the media query 
for mobile devices and add the following style rule to display the navicon. 


a#navicon { 
display: block; 


} 


BD 5. When the navicon is displayed, you want the contents of the navigation list 
to be hidden. Add the following style rule within the mobile device media 
query: 
nav.horizontal ul { 


display: none; 


} 


NN ay =HTML 5 and CSS | Tutorial 5 Designing for the Mobile Web 


D 6. Finally, add the following style rule to the mobile device query that displays 
the contents of the navigation list when the user hovers over the navicon or 
the contents of the navigation list. 


a#navicon:hover+ul, nav.horizontal ul:hover { 
display: block; 


} 


Figure 5-42 highlights the style rules for the navicon hypertext link. 


Figure 5-42 Style rules for the navicon image 


does not display afnavicon { 
the navicon for display: none; 
most devices } 
@media only een and (max-width: 480px) { 


3 ; a#navicon { 
displays the navicon 


: ‘ ———___ display: block; 
for mobile devices SOESE SESE . 
_J } 
hides the navigation nav.horizontal ul { 
list for mobile —+———»display: none; 
devices } 
displays the navigation list a#navicon:hovertul, nav.horizontal ul:hover { 
when the user hovers over |} splay: block; 
the navicon or moves the } 
mouse pointer over the 


navigation list D } 


D 7. Save your changes to the file and then reload the tf_prek.html file in your 
browser or mobile devices. Resize the viewport as needed to display the 
mobile layout. 


D 8. Verify that as you hover over or touch the navicon, the navigation list 
appears, as shown in Figure 5-43. 


Figure 5—43 Action of the navicon for mobile devices 


navicon 
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We trusted fnends « 


Pre-K Classes 


As preschoolers gain more self-esteem, they feel ready to 
take on the world. Our preschool curriculum enhances 
their confidence by providing activities to help them 
become problem solvers and nurture a love of learning 
With independent exploration, structured activities, and 
hands-on learning, our children develop a variety of skills 
and knowledge in areas from mathematics to reading. 


We're proud of the work we do. Early leaming standards, 
backed by education experts, inform the scope and 
sequence of our pre-k program. Our curriculum aligns to 
72 learning standards progressing sequentially across six 
developmental domains. Add to this a healthy dose of 
running, jumping and movement to keep children active 
and you'll see why Trusted Friends is a true leader in early 
childhood education 


menu opens when the 
HOME user hovers over or 
"== | taps the navicon 


TODDLERS 


AFTER SCHOOL 


Pre-K Classes 


As preschoolers gain more self-esteem, they feel ready to 
take on the world. Our preschool curriculum enhances 
their confidence by providing activities to help them 
become problem solvers and nurture a love of learning. 
With independent exploration, structured activities, and 


HTML 415 


hands-on learning, our children develop 2 variety of skills 
and knowledge in areas from mathematics to reading 


We're proud of the work we do. Early learning standards, 
backed by education experts, inform the scope and 
sequence of our pre-k program. Our curriculum aligns to 
72 learning standards progressing sequentially across six 
developmental domains. Add to this a healthy dose of 
running, jumping and movement to keep children active 
and you'll see why Trusted Friends is a true leader in early 
childhood education. 


BenBois/openclipart 


D 9. Verify that hovering over or touching other parts of the page hides the 
navigation list. 


The methods you used in this tutorial to create pulldown menus and navicon menus 
represent what you can accomplish when limited to CSS and the hover pseudo-class. 
As you increase your skill and knowledge of HTML, you'll learn other, more efficient 
ways of creating mobile navigation menus using program scripts and web frameworks. 
If you want to explore how to take advantage of these tools, search the web for navicon 
libraries of prewritten code that can be inserted into your website. 
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4 Written Communication: Speeding Up Your Website by Minifying and 
Compressing 


Once your website is working and you are ready to distribute it to the web, you have 
one task remaining: minifying your code. Minifying refers to the process of removing 
unnecessary characters that are not required for your site to execute properly. For 
example, the following text in a CSS file contains comments and line returns and blank 
spaces, which makes the text easy to read, but these features are not required and 
have no impact on how the browser renders the page: 


PROSKILLS 


/* Tablet Styles */ 


nav.horizontal > ul > li { 
display: block; 


} 


A minitied version of this code removes the comment and the extraneous white-space 
characters leaving the following compact version: 


nav.horizontal>uls>li{display:block; } 


Minifying has several important advantages: 


¢ Minifying reduces the amount of bandwidth required to retrieve the website 
because the files are smaller. 

¢ The smaller minified files load faster and are faster to process because extraneous 
code does not need to be parsed by the browser. 

e A faster site provides a better user experience. 

¢ Smaller files means less server space required to host the website. 

e Search engines, such as Google, evaluate your website based on page load speed 
and will downgrade sites with bloated code that take too long to load. 


There are several free tools available on the web to automate the minification 
process including CSS Minifier, Compress HTML, HTML Minitier, and CSS Compressor. 
Also, many HTML editors include built-in minifying tools. Remember, a minified file is 
still a text file and can be read (though with difficulty) in a text editor. 

To further reduce your file sizes, consider compressing your files using utilities like 
Gzip. A compressed file is no longer in text format and must be uncompressed before 
it is readable. All modern browsers support Gzip compression for files retrieved from a 
server. Make sure you know how to properly configure your web server to serve Gzip- 
compressed file in a readable format to the browser. 

The process of minifying your files is irreversible, so make sure you retain the version 
with the text in a readable format and all of your comments preserved. Most minifying 
and compression tools will make a backup of your original files. 


You’ve completed your work on the design of the Pre-K Classes page for Trusted 
Friends Daycare. In the next session, you'll explore other uses of media queries by 
designing a page for printed output. You may close your files now. 
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" Session 5.2 Quick Check 


1. Which of the following is not a style to display an element as a flexbox? 
a. display: -chrome-flex; 
b. display: -webkit-flex; 
c. display: -webkit-box 


REVIEW 


d. display: -ms-flexbox; 
2. To display items within a flexbox in a column filled from the bottom upward, 


use: 

a. flex-direction: column up; 

b. flex-direction: column-bottom; 
c. flex-direction: column-reverse; 


d. flex-direction: column-to-top; 
3. To set the initial size of a flexbox item to 250 pixels, use: 
a. flex-size: 250px; 
b. flex-basis: 250px; 
c. flex: 250px; 
d. flex-from: 250px; 
4. To set the growth rate of a flexbox item to a rate of 4, use: 
a. flex-rate: 4; 
b. flex: 4x; 
c. flex-growth: 4; 


d. flex-grow: 4; 
5. Which of the following sets the div element to be equal in size regardless of 
the size of the flexbox container? 
a. div {flex: equal; } 
b. div {flex: 1 1 100px;} 
c. div {flex: 1 1 Opx;} 
d. div {flex: 0 0 Opx} 
6. To reorder of the placement of a flex item within its flexbox, use: 
a. flex-reorder 
b. flex-move 
c. flex-basis; 
d. order 
7. To center flex items along the flexbox’s main axis, use: 
a. justify-content: center; 
b. align-content: center; 
c. flex-position: center; 
flex-main: center; 


d. 
8. To center flex items along the flexbox’s cross axis, use: 
ustify-content: center; 

b 


lign-content: center; 


a. j 

al 
c. flex-position: center; 
d. flex-main: center; 
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Session 5.3 Visual Overview: 


The @page rule defines 
the size and margins 
of the printed page. 


display: none;<—— 


@page { 
size: 8.5in 1lin portrait; 
margin: @.51n; 


For print layouts, fonts 
should be sized in 
points and widths and 
heights expressed in 
inches or centimeters. 


hi { 
font-size: 
line-height: 30pt; 


margin: 


Use the after 
pseudo-element along 
with the content 


property to display the 
text of all hypertext 
URLs. 


Use the page-break- 
inside property to 
prohibit page breaks 
within an element. 


Use the widows 
property to limit the 
number of lines 
stranded at the top 
of a page. 


aittafter { 
content: " (" attr(href) 
font-weight: bold; 
word-wrap: break-word; 


) 


article:nth-of-type(n+2) { 
page-break-before: always; 


} 


img, ol, ul f{ 
+» page-break-inside: avoid; 


} 
p { 


orphans: 3;~<—— 


oi) 


++» widows: 3; 


} 


4 


The display property 
is set to none for objects 
you don’t want printed. 


Use the page-break- 
before property to 
insert page breaks before 
elements. 


Use the orphans 
property to limit the 
number of lines stranded 
at the bottom of a page. 
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Print Styles 


Page size is set at 
8.5 inches by 11 inches 


with a 0.5 inch margin 
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Designing for Printed Media 


So far your media queries have been limited to screens of different widths. In this 
session you'll explore how to apply media queries to print devices and work with 
several CSS styles that apply to printed output. To do this you’ll create a print style 
sheet that formats the printed version of your web document. 


Previewing the Print Version 


Marjorie has created a page containing articles of interest for parents at Trusted Friends 
Daycare. She has already written the page content and the style sheets for mobile, 
tablet, and desktop devices. Open the articles document now. 


To open the Articles of Interest page: 


D 1. Use your editor to open the tf_articles_txt.html file from the html05 > 
tutorial folder. Enter your name and the date in the comment section of the 
file and save it as tf_articles.html. 


BD 2. Within the document head, create links to the tf_reset.css and tf_styles3.css 
style sheet files in that order. 


D 3. Scroll through the document to become familiar with its contents and then 
save your changes to file, but do not close it. 


BD 4. Open the tf_articles.html file in your web browser. 


BD 5. Take some time to view the contents of the page under different screen 
resolutions, noting how Marjorie has used responsive design to create 
different page layouts based on the screen width. 


Now, you'll examine how Marjorie’s page will appear when printed. 


BD 6. Use the Print Preview command within your browser to preview how this 
page will appear when printed. Figure 5-44 shows a preview of the first two 
pages of the print version using a black and white printer. 


Figure 5-44 Print version of the Articles of Interest page 
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Trouble? Depending on your browser and printer, your print preview might 
appear different from the preview shown in Figure 5-44. 


Browsers support their own internal style sheet to format the print versions of the 
web pages they encounter. However, their default styles might not always result in 
the best printouts. Marjorie points out that the print version of her page has several 
significant problems: 


¢ The printed version includes two navigation lists, neither of which have a purpose in 
a printout. 

¢ Page breaks have been placed in awkward places, splitting paragraphs and images in two. 

¢ Background colors, while looking good on a screen, might not print well. 


Marjorie would like you to design a custom print style sheet that fixes these problems 
by removing unnecessary page elements and choosing page breaks more intelligently. 


Applying a Media Query for Printed Output 


To apply a print style sheet, you use the media attribute in your link elements to target 
style sheets to either screen devices or print devices. Modify the tf_articles.html file now 
to access a new style sheet named tf_print.css into which you include your print styles. 


To access a print style sheet: 


D 1. Use your editor to open the tf_print_txt.css file from the html05 > tutorial 
folder. Enter your name and the date in the comment section and save it as 
tf_print.css. 


BD 3. Add the attribute media="screen" to the link element for the tf_styles3.css 
style sheet to apply it only to screen devices. 


BD 4. Add the following 1ink element for print styles: 


<link href="tf£ print.css" rel="stylesheet" media="print" /> 


Figure 5-45 highlights the revised link elements in the file. 


Figure 5-45 Style sheets for different devices 


<t , 6 r3 : A icle 5 f srest</tit 
itle>Trusted Friends: Articles of Interes itle styles for all devices 


meta charset="“utf-8" 
<meta name="viewport” ontent="width=device-width, j 
<Link href="tf_reset.css" rel="stylesheet" media="all" 


Link href="tf_styles3.css" rel="stylesheet" media="screen" 
<link href="tf_print.css" rel="stylesheet" media="print"A/> 
fhead > 


styles for print styles for screen 
devices devices 


BD 5. Save your changes to the file and close it. 
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You'll start designing the print version of this page by hiding those page elements 
that should not be printed, including the navigation list, the aside element, and the 
body footer. 


To hide elements in the print version: 
BD 1. Return to the tf_print.css file in your editor. 
BD 2. Go to the Hidden Objects section and add the following style rule: 


nav.horizontal, aside, footer { 
display: none; 


} 


Figure 5-46 highlights the style rule to hide page elements. 


Figure 5-46 Hiding page elements for printing 


sets the display of the 
navigation list, aside nav.horizontal, aside, footer { 
element, and body display: none; 

footer to do not display | |? 


BD 3. Save your changes to the file and then reload the tf_articles.html file in your 
browser and preview the printed output. Verify that the navigation lists, 
aside elements, and body footer are not displayed in the printed version. 


Next, you'll define the page size of the print version of this document. 


Working with the @page Rule 


In CSS every printed page is defined as a page box, composed of two areas: the 
page area, which contains the content of the document, and the margin area, which 
contains the space between the printed content and the edges of the page. 

Styles are applied to the page box using the following @page rule 


@page { 
style rules 
} 


where style rules are the styles applied to the page. The styles are limited to 
defining the page size and the page margin. For example, the following @page rule sets 
the size of the page margin to 0.5 inches: 


@page { 
margin: 0.5in; 
} 


The page box does not support all of the measurement units you've used with the 
other elements. For example, pages do not support the em or ex measurement units. In 
general, you should use measurement units that are appropriate to the dimensions of 
your page, such as inches or centimeters. 
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Setting the Page Size 


Because printed media can vary in size and orientation, the following size property 
allows web authors to define the dimensions of the printed page 


size: width height; 


here width and height are the width and height of the page. Thus to define a page 
Uesecantevenmderhe that is 8.5 inches wide by 11 inches tall with a 1-inch margin, you would apply the 
page sizes and orientations following style rule: 
set in @page rule by 
changing the options in @page { 
their print dialog box. size: 8.5in llin; 
margin: lin; 


} 


You can replace the width and height values with the keyword auto (to let 
browsers determine the page dimensions) or inherit (to inherit the page size from the 
parent element). If a page does not fit into the dimensions specified in the @page rule, 
browsers will either rotate the page or rescale it to fit within the defined page size. 


Using the Page Pseudo-Classes 


By default, the @page rule is applied to every page of the printed output. However, if 
the output covers several pages, you can define different styles for different pages by 
adding the following pseudo-class to the @page rule: 


@page:pseudo-class { 
style rules 


} 


where pseudo-class is first for the first page of the printout, left for the pages that 
appear on the left in double-sided printouts, or right for pages that appear on the right 
in double-sided printouts. For example, if you are printing on both sides of the paper, 
you might want to create mirror images of the margins for the left and right pages of 
the printout. The following styles result in pages in which the inner margin is set to 5 
centimeters and the outer margin is set to 2 centimeters: 


@page:left {margin: 3cm 5cm 3cm 2cm; } 
@page:right {margin: 3cm 2cm 3cm 5cm; } 


Page Names and the Page Property 


To define styles for pages other than the first, left, or right, you first must create a page 
name for those styles as follows 


@page name { 
style rules 


} 


where name is the label given to the page. The following code defines a page style 
named wideMargins used for pages in which the page margin is set at 10 centimeters 
on every side: 


@page wideMargins { 
margin: 10cm; 


} 


Once you define a page name, you can apply it to any element in your document. 
The content of the element will appear on its own page, with the browser automatically 
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inserting page breaks before and after the element if required. To assign a page name to 
an element, you use the following page property 


selector { 
page: name; 


} 


where selector identifies the element that will be displayed on its own page, and 
name is the name of a previously defined page style. Thus the following style rule 
causes all block quotes to be displayed on separate page(s) using the styles previously 
defined as the wideMargins page: 


blockquote { 
page: wideMargins; 


REFERENCE 


Creating and Applying Page Styles 
¢ To define a page box for the printed version of a document, use the CSS rule 


@page { 
size: width height; 
} 


where width and height are the width and height of the page. 
¢ To define the page styles for different output pages, use the rule 


@page:pseudo-class { 
style rules 


} 


where pseudo-class is first for the first page of the printout, left for the pages 
that appear on the left in double-sided printouts, or right for pages that appear on 
the right in double-sided printouts. 

¢ To create a named page for specific page styles, apply the rule 


@page name { 
style rules 


} 


where name is the label assigned to the page style. 
¢ To apply a named page style, use the rule 


selector { 
page: name; 


} 


where selector identifies the element that will be displayed on its own page, and 
name is the name of a previously defined page style. 


You'll use the @page rule to define the page size for the printed version of the 
Articles of Interest document. Marjorie suggests that you set the page size to 8.5 x 11 
inches with 0.5-inch margins. 
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To define the printed page size: 
D 1. Return to the tf_print.css file in your editor. 
BD 2. Go to the Page Box Styles section and add the following rule: 


@page { 
Baleaap f3}4 Salley alalsline 
margin: 0.5in; 


} 


Figure 5-47 highlights the rule to set the page size. 


Figure 5-47 Setting the page size 


sets the page to Gpage { 
8.5 inches wide by size: 8.5in ilin; 
11 inches long margin: @.5in3 


sets the margin to 
0.5 inches around 
the page content 


D 3. Save your changes to the file. 


With printed output, widths and heights are measured not in pixels but in inches 
or centimeters. Font sizes are not measured in pixels but rather in points. With that in 
mind, create styles to format the sizes of the text and graphics on the page. 


To format the printed text: 


BD 1. Go to the Typography Styles section and insert the following styles to format 
the appearance of h1 and h2 headings and paragraphs: 


ful, 4 
font-size: 28pt; 
line-height: 30pt; 
margin: 0.3in Oin 0.2in; 


} 
h2 { 

font-size: 20pt; 

imewateelalg (o)qilatia, Wale, (0) alain (0), Saliayp 
} 
p { 

font-size: 12pt; 

inebacalialG (0) oibatre, Wala, (0) alsin (0), sjalraip 
} 


D 2. Within the List Styles section, add the following style rules to format the 
appearance of unordered lists: 


ul { 
list-style-type: disc; 
margin-left: 0.5in; 
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Figure 5-48 shows the typography and list styles in the print style sheet. 


Figure 5-48 Typographical formats 


font sizes are 
measured in 
points 


margins are 
measured 
in inches 


- 
-— 


format of h1 
headings 


zt 
format of h2 Sareea n Bt . 
headings — ; - 
{ 
format of font-size: 4 
paragraphs rgins 3 
} 
iS 
format of lis 


unordered lists 


Next, you'll format the appearance of images on the page. 


To format the printed images: 


BD 1. Within the Image Styles section, add the following style rule to format the 
appearance of inline images within each article element: 


article img { 
border: 2px solid rgb(191, 191,191); 
display: block; 
margin: 0.25in auto; 
width: 65%; 


} 


Figure 5-49 shows the style rule for inline images on the printed page. 


Figure 5-49 Image formats 


displays all article images with bardars nS solid rgb(191, 191,191)5 
a gray border, with a width of display: block; 

65% of the page body, and margin: @.25in auto; 

centered horizontally widths ; 


} 


D 2. Save your changes to the style sheet and then reload the tf_articles.html file 
in your browser and preview the appearance of the printed page. Figure 5-50 
shows the appearance of the first page printed using a black and white printer. 
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Trusted Friends: Articles of interest 


FP trusted fnends daycare 


An Accredited Center 


print version 
of the images 


At Trusted Friends we believe that every child is capable of excellence. That is why we are 
committed to pursuing and maintaining our status as an accredited daycare center. By seeking 


national accreditation, you know that Trusted Friends is striving to give your family the very best 
daycare experience. 


What is Accreditation? 


Every daycare center must meet the state's minimum license requirements, We go beyond that. 
When a daycare center is awarded national accreditation they are meeting a higher standard that 
demonstrates its expertise in: 


Classroom Management 
Curriculum Development 
Health and Safety 
Parental Support 
Community Involvement 
Teacher Certification 
Administrative Oversight 
Financial Statements 


filed//D Shim l0Stutorialif_arficles him! 


© Pressmaster/Shutterstock.com 


Marjorie notices that all of the hyperlinks in the document appear in blue and 
underlined as determined by the default browser style. While this identifies the text as 
a hypertext link, it doesn’t provide the reader any information about that link. She asks 
you to modify the style sheet to fix this problem. 
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Be sure to include blank 
spaces around the href 
value so that the URL 
does not run into the 
surrounding text. 


Formatting Hypertext Links for Printing 


Because printouts are not interactive, it’s more useful for the reader to see the URL of a 
hypertext link so that he or she can access that URL at another time. To append the text 
of a link’s URL to the linked text, you can apply the following style rule: 


a::after { 
content: " (" attr(href) ") "; 


} 


This style rule uses the after pseudo-element along with the content property and 
the attr() function to retrieve the text of the href attribute and add it to the contents 
of the a element. 

You should be careful when using this technique. Appending the text of a long and 
complicated URL will make your text difficult to read and might break your page layout 
if the text string extends beyond the boundaries of its container. One way to solve this 
problem is to apply the following word-wrap property to the URL text: 


word-wrap: type; 


where type is either normal (the default) or break-word. A value of normal breaks 

a text string only at common break points such as the white space between words. A 
value of break-word allows long text to be broken at arbitrary points, such as within a 
word, if that is necessary to make the text string fit within its container. Because a URL 
has no common break points such as blank spaces, applying the break-word option 
ensures that the text string of the URL will be kept to a manageable length by breaking 
it as needed to fit within the page layout. 


REFERENCE 


Formatting Hypertext for Printing 
e To add the URL after a hypertext link, apply the style rule: 


a::after { 
Comecines W (WW eyeicie (imiesne)) Wj) Wp 


} 


¢ To automatically wrap the text of long URLs as needed, add the following style to the 
link text: 


word-wrap: break-word; 


Format the appearance of hypertext links in the document to display each link’s URL 
and to display the hypertext links in a black bold font with no underlining, then use the 
word-wrap property to keep long URLs from extending beyond the boundaries of their 
container. 
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To format the hypertext links: 
D 1. Return to the tf_print.css file in your editor and go to Hypertext Styles 
section, inserting the following styles to format the appearance of all 
hypertext links, appending the URL of each link: 


a { 
color: black; 
text-decoration: none; 


a::after { 
Contents Uumaltier (ae) ae) en: 
font-weight: bold; 
word-wrap: break-word; 


} 


Figure 5-51 describes the style rules used to format printed hypertext links. 


Figure 5-51 Formatting printed hypertext links 


displays hypertext — : 
links in black with rs : a ee none 
no underlining , a ‘ 
trafter { 
adds the URL of sideclihs Seer ny ms 
the hypertext link ato allows the URL to 
in a bold font word-wrap: break-word$ wrap in order to 


preserve page layout 


BD 2. Save your changes to the style sheet and then reload the tf_articles.html 
file in your browser and preview the page printout. Figure 5-52 shows the 
appearance of the printed hypertext links found on the second page of 
Marjorie’s printout. 
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Preview of the hypertext links on page 2 


Trusted Friends: Articles of interest 


How does Accreditation Work? 


Every other year we go through an intense review by recognized and esteemed national accreditation 
agencies. Their positive reports (available for inspection) confirm that we are providing a clean, 
safe, and positive environment for our children. Accreditation verifies that our teachers are qualified 
and full engaged in giving our children a first-class educational experience. 


Once we've completed the entire accreditation self-study process, trained professionals from our 
accrediting agencies conduct on-site visits to validate our compliance with national early childhood 
education standards. But accreditation doesn't just take place every two years. It's an ongoing 
process of self-evaluation, discussion, and parental reviews. We encourage our parents to help us 
improve our center and become better stewards for their children. 


Who Provides Accreditation? 


Trusted Friends pursues national accreditation from three of the most respected national early 
childhood accreditation agencies: 


¢ National Association for Youth Care (http://www.example.com/nayc) 
¢ United Accreditation for Early Care and Education (http://www.example.com/uaece) 
¢ National Daycare Accreditation (http://www.example.com/nda) 


Feel free to contact us to discuss accreditation and learn more about our standards for care and 
education. 


URL of each 
hypertext link 


Our Community 


Trusted Friends is committed to improving the lives of children in our community. Our expertise in 
caring for the children at our daycare center gives us a unique understanding of child development, 
education issues, and parenting. Trusted Friends has partnered with several community 
organizations that advocate for poor and needy children and families. We don't think of it as charity. 
It's part of our calling. 


© Gladskikh Tatiana/Shutterstock.com 


You can search the web for several free scripting tools that give you more options for 
how your URLs should be printed, including scripts that automatically append all URLs 
as footnotes at the end of the printed document. 
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Working with Page Breaks 


When a document is sent to a printer, the browser determines the location of the page 
breaks unless that information is included as part of the print style sheet. To manually 
insert a page break either directly before or directly after an element, apply the 
following page-break-before or page-break-after properties: 


page-break-before: type; 
page-break-after: type; 


where type has the following possible values: 


e® always Use to always place a page break before or after the element 
* avoid Use to never place a page break 


° left Use to place a page break where the next page will be a left page 

exight Use to place a page break where the next page will be a right page 

® auto Use to allow the printer to determine whether or not to insert a page break 
p pag: 


® inherit Use to insert the page break style from the parent element 


For example, if you want each h1 heading to start on a new page, you would apply the 
following style rule to insert a page break before each heading: 


h1 { 
page-break-before: always; 


REFERENCE 


Adding a Page Break 
¢ To set the page break style directly before an element, apply the property 
page-break-before: type; 


where type is always, avoid, left, right, auto, or inherit. 
¢ To set the page break style directly after an element, apply 


page-break-aftter: Eype; 


After the first article, Marjorie wants each subsequent article to start on a new page. 
To select every article after the initial article, use the selector 


article:nth-of-type (n+2) 


which selects the second, third, fourth, and so on article elements in the document 
(see “Exploring the nth-of-type Pseudo-class” in Tutorial 2.) To ensure that each of the 
selected articles starts on a new page, insert the page break before the article using the 
following style rule: 


article:nth-of-type(n+2) { 
page-break-before: always; 


} 
Add this style rule to the print style sheet now. 
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To print each article on a new page: 
BD 1. Go to the Page Break Styles section and insert the following style rule: 


article:nth-of-type(n+2) { 
page-break-before: always; 


} 


Figure 5-53 highlights the style rule to insert the article page breaks. 


Adding page breaks before the document articles 


selects every article 
_ after the first one 
ticl a a ahi dence 


inserts a page break 
page tore: alway: 


before the article } 


BD 2. Save your changes to the file and then reload the tf_articles.html file in your 
browser and preview the printed page. Verify that the second article in the 
document on Community Involvement starts on a new page. 


Next, you'll explore how to remove page breaks from the printed version of your 
web page. 


How Browsers Set Automatic Page Breaks 


Browsers establish page breaks automatically, unless you manually specify the page 
breaks with a print style sheet. By default, browsers insert page breaks using the 
following guidelines: 


INSIGHT 


e Insert all of the manual page breaks as indicated by the page-break-before, 
page-break-after, and page-break-inside properties 

¢ Break the pages as few times as possible 

e Make all pages that don’t have a forced page break appear to have the same height 

Avoid page breaking inside page elements that have a border 

¢ Avoid page breaking inside a web table 

Avoid page breaking inside a floating element 


Other styles from the print style sheet are applied only after attempting to satisfy 
these constraints. Note that different browsers apply page breaks in different ways, so 
while you can apply general rules to your print layout, you cannot, at the current time, 
make the print versions completely consistent across browsers. 


Preventing Page Breaks 


You can prevent a page break by using the keyword avoid in the page-break-after 
or page-break-before properties. For example, the following style rule prevents page 
breaks from being added after any heading. 


hi, h2, h3, h4, h5, he { 
page-break-after: avoid; 


} 
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Unfortunately in actual practice, most current browsers don’t reliably support 
prohibiting page breaks in this fashion. Thus, to prevent page breaks after an element, 
you will usually have to manually insert a page break before the element so that the 
element is moved to the top of the next page. 

For other print layouts, you will want to prevent page breaks from being placed 
inside an element. This usually occurs when you have a long string of text that you 
don’t want broken into two pages. You can prevent printers from inserting a page break 
by using the following page-break- inside property 


page-break-inside: type; 


where type is auto, inherit, or avoid. Thus, to prevent a page break from appearing 
within any image you can apply the following style rule: 


img { 
page-break-inside: avoid; 


} 


Unlike the page-break-before and page-break-after properties, almost all 
current browsers support the use of the avoid keyword for internal page breaks. 


Preventing Page Breaks Inside an Element 
¢ To prevent a page break from occurring within an element, apply the style: 


page-break-inside: avoid; 


REFERENCE 


Marjorie asks you to revise the print style sheet to prevent page breaks from 
occurring within images, ordered lists, and unordered lists. 


To avoid page breaks: 


BD 1. Return to the tf_print.css file in your editor and go to the Page Break Styles 
section and insert the following style rule: 


akitey, Cul, wal af 
page-break-inside: avoid; 


} 


Figure 5-54 highlights the style rule to avoid page breaks in lists and images. 


Figure 5-54 Avoiding line breaks within lists and images 


avoids line breaks 


ae 
Ss z age-break-inside: avoid; 
within lists and images . . 


D 2. Save your changes to the file. 


NN aX = HTML 5 and CSS | Tutorial 5 Designing for the Mobile Web 


Note that the avoid type does not guarantee that there will never be a page break 
within the element. If the content of an element exceeds the dimensions of the sheet of 
paper on which it’s being printed, the browser will be forced to insert a page break. 


Working with Widows and Orphans 


Page breaks within block elements, such as paragraphs, can often leave behind widows 
and orphans. A widow is a fragment of text left dangling at the top of page, while an 
orphan is a text fragment left at the bottom of a page. Widows and orphans generally 
ruin the flow of the page text, making the document difficult to read. To control the size 
of widows and orphans, CSS supports the following properties: 


widows: value; 
orphans: value; 


where value is the number of lines that must appear within the element before a page 
break can be inserted by the printer. The default value is 2, which means that a widow 
or orphan must have at least two lines of text before it can be preceded or followed by 
a page break. 

If you wanted to increase the size of widows and orphans to three lines for the 
paragraphs in a document, you could apply the style rule 


p { 
widows: 3; 
orphans: 3; 


} 


and the browser will not insert a page break if fewer than three lines of a paragraph 
would be stranded at either the top or the bottom of the page. 


Controlling the Size of Widows and Orphans 


¢ To set the minimum size of widows (lines stranded at the top of a page), apply the 
property 
widows: value; 


where value is the number of lines that must appear at the top of the page before the 
page break. 

¢ To set the minimum size of orphans (lines stranded at the bottom of a page), apply 
the property 


REFERENCE 


orphans: value; 


where value is the number of lines that must appear at the bottom of the page before 
the page break. 


Use the widows and orphans properties now, setting their size to 3 for paragraphs in 
the printed version of the Articles of Interest page. 
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To avoid widows and orphans: 


BD 1. Within the Page Break Styles section of the tf_print.css file, add the 
following style rule. 


Pat 
orphans: 3; 
widows: 3; 


} 


Figure 5-55 highlights the style rule for setting the size of widows and 
orphans. 


Figure 5-55 Setting the size of widows and orphans 


widows and orphans 
set to a minimum of 
3 lines each 


BD 2. Save your changes to the file and then reload the tf_articles.html file in your 
browser. Preview the appearance of the printed document. Figure 5-56 
shows the final appearance of the printed version of this document. 


Figure 5-56 5-56 Final print version of the document 
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An Accredited Center 


What ls Acenedien 


page 1 page 2 page 3 


© Pressmaster/Shutterstock.com; © Gladskikh Tatiana/Shutterstock.com; 


Trouble? Depending on your browser and your default printer, your printed 
version may look slightly different from the one shown in Figure 5-56. 


You’ve completed your work on the print styles for the Articles of Interest page. By 
modifying the default style sheet, you’ve created a printout that is easier to read and 
more useful to the parents and customers of Trusted Friends Daycare. 
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Vi 


Written Communication: Tips for Effective Printing 


One challenge of printing a web page is that what works very well on the screen often 
fails when transferred to the printed page. For example, some browsers suppress 
printing background images, so that white text on a dark background, which appears 
fine on the computer monitor, is unreadable when printed. Following are some tips 
and guidelines you should keep in mind when designing the printed version of your 
web page: 


PROSKILLS 


¢ Remove the clutter. A printout should contain only information that is of immediate 
use to the reader. Page elements such as navigation lists, banners, and advertising 
should be removed, leaving only the main articles and images from your page. 

¢ Measure for printing. Use only those measuring units in your style sheet that are 
appropriate for printing, such as points, inches, centimeters, and millimeters. 
Avoid expressing widths and heights in pixels because those can vary with printer 
resolution. 

¢ Design for white. Because many browsers suppress the printing of background 
images and some users do not have access to color printers, create a style sheet 
that assumes black text on a white background. 

¢ Avoid absolute positioning. Absolute positioning is designed for screen output. 
When printed, an object placed at an absolute position will be displayed on the first 
page of your printout, potentially making your text unreadable. 

© Give the user a choice. Some readers will still want to print your web page exactly 
as it appears on the screen. To accommodate them, you can use one of the many 
JavaScript tools available on the web that allows readers to switch between your 
screen and print style sheets. 


Finally, a print style sheet is one aspect of web design that works better in theory 
than in practice. Many browsers provide only partial support for the CSS print styles, 
so you should always test your designs on a variety of browsers and browser versions. 
In general, you will have the best results with a basic style sheet rather than one that 
tries to implement a complicated and involved print layout. 


In this tutorial you’ve learned how to apply different styles to different types of 
devices and output formats. Marjorie appreciates the work you’ve done and will 
continue to rely on your knowledge of media queries, flexible layouts, and print 
styles as she redesigns the Trusted Friends website. You can close any open files or 
applications now. 
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" Session 5.3 Quick Check 


REVIEW 


1. 


What attribute do you add to a Link element to indicate that the style sheet is 
used for printed media? 

a. rel="print" 

b. type="print" 

c. media="print" 

d. print="yes" 


. What @rule is used for setting the properties of the printed page box? 


a. @page 

b. @print 

Cc. @margin 
d. @printout 


. To set the right-side printed page to have a 3 centimeter top/bottom margin and 


a 5 centimeter left/right margin, use: 

a. @page:right {margin: 3cm 5cm; } 

b. @page:right {margin: 5cm 3cm;} 

C. @page {side: right; margin: 5cm 3cm;} 
d. @page.right {margin: 5cm 3cm; } 


. To apply a page break before every section element, use: 


a. section {break: before; } 

b. section {page-break: before; } 
C. section {break-before: true; } 
d. section {break-before: always; } 


. To prevent a page break from being placed within any header element, use: 


a. header {break: never; } 

b. header {page-break-inside: avoid; } 
C. header {inside-break: never; } 

d. header {break: none; } 


. What style do you apply to allow the browser to wrap long strings of text to a 


new line whenever needed? 

a. word-break: auto; 

b. word-wrap: true; 

Cc. word-wrap: break-word; 

d. word-inside-break: always; 


. To limit the size of widows for all article elements to 3 lines or more, use: 


a. article {widows: 2;} 

b. article {widows: 3;} 

C. article {widows: 3+;} 
{ 


d. article {widows: >2;} 


. To display the URL of a hypertext link, use the property: 


a. attr (link) 
b. attr (url) 
Cc. attr (hypertext) 
d. attr (href) 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code5-1_txt.html, code5-1_media_txt.css, 
code5-1_layout.css, code5-1_logo.jpg, code5-1_photo.jpg 


wi 
Q 
Oo 
UO 


Use media queries to create a responsive design for the menu shown in Figure 5-57. You will need to 
create three menu layouts: one for screen widths 500 pixels or less, another for screen widths of 501 
pixels to 710 pixels, and a third for screen widths greater than 710 pixels. 


Coding Challenge 5-1 example page 


the Foended m T02 the 
Ridzewood Jia bows Ridgewood 


Adventure Island 
Opens 


The Adventure 
Island theme 
park opened its 
doors on 
Monday near 
Ridgewood. 
The park. one 
of the biggest in New Jersey, drew large 
crowds, but the long lines didn't deter 
anyone. “I've been watching them put up 
the rides over the last year. It's exciting to 
finally get inside the gates!" said 
Ridgewood resident, Denise Brooks, 


story continues on page 2 


© Courtesy Patrick 


Carey 


Adventure Island Opens 


The Adventure Island theme park opened its doors on 
Monday near Ridgewood. The park. one of the 
biggest in New Jersey, drew large crowds, but the 
long lines didn’t deter anyone. "I've been watching 
them put up the rides over the last year. It's exciting to 
finally get inside the gates!" said Ridgewood resident, 
Denise Brooks. 


Story continues on page 2 
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The Adventure Island theme park opened its doors on 
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deter anyone. "I've been watching them put up the rides o 
over the last year. It’s exciting to finally get inside the > 
gates!” said Ridgewood resident, Denise Brooks. g 
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story continues on page 2 


Do the following: 


1. Open the code5-1_txt.html and code5-1_media_txt.css files from the html05 » code! folder. 
Enter your name and the date in each document and save the files as code5-1.html and 
code5-1_media.css respectively. 

2. Go to the code5-1.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code5-1_layout.css and code5-1_media.css files. 

3. Add a viewport meta tag to the document head to set the width of the layout viewport equal to 
the width of the device and set the initial scale of the viewport to 1.0. Review the contents of the 
file and then save your changes. 

4. Go to the code5-1_media.css file in your editor. 


CODE 
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5. Create a media query for devices with a maximum width of 500 pixels. Within the query do the 
following: 


a. Set the display of the img element within the article element to none. 
b. Center the text contained within the ul element belonging to the submenu class. 


6. Create a media query for devices with a minimum width of 501 pixels. Within the query do the 
following: 


a. Float the nav element on the left page margin. 
b. Set the width of the nav element to 130 pixels and the height to 400 pixels. 


c. Set the top margin of the nav element to 30 pixels, the right margin to 25 pixels, and the 
bottom and left margins to 0 pixels. 
7. Create a media query for devices with a minimum width of 710 pixels. Within the query do the 
following: 
a. Set the float property of the nav element to none, its width to 100% and its height to auto. 
Set the nav element margins to 0. 


b. Set the display of ul elements of the mainmenu class to flex with the flex flow in the row 
direction with no wrapping; justify the contents of the flexbox in the center. 


c. Set the £lex property of 11 elements with the ul .mainmenu element to have a growth factor 
of 0, a shrink factor of 1, and a basis value of 120 pixels. 


8. Save your changes to the file and then view the page under different screen widths, verifying that 
the menu format changes as the screen width changes as shown in Figure 5-57. 


9. Submit the completed file to your instructor. 


Coding Challenge 2 


Data Files needed for this Coding Challenge: code5-2_txt.html, code5-2_flex_txt.css, 
code5-2_layout.css, and 13 image files 


Figure 5-58 shows the layout of a page that displays cards containing social media icons. Create 
this page using CSS flex styles so that the icons are always laid out in rows and columns for any 
screen width. 


Figure 5-58 Coding Challenge 5-2 example page 


HTML 439 


YouTube 


Bi] a. 


Create your Pose 


© 2019 GraphicsFuel 
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Do the following: 


1. Open the code5-2_txt.html and code5-2_flex_txt.css files from the html05 » code2 folder. Enter 
your name and the date in each document and save the files as code5-2.html and code5-2_flex. 
css respectively. 

2. Go to the code5-2.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code5-2_layout.css and code5-2_flex.css files. Review the contents of the file and 
then save your changes. 


3. Go to the code5-2_flex.css file in your editor. 


4. Display the section element as a flexbox. Set the flow of items within the flexbox to go in row 
order with reverse wrapping so that the first item (Facebook) appears in the bottom-left corner 
and the last item (E-mail) appears in the top-right corner. 


5. Set the growth and shrink rate of the div elements of the card class to 1 and 1. Set the flex basis 
of those elements to 200 pixels. 


6. Display each div element of the card class itself as a flexbox. 

7. Apply the following flex layout to the items within the card div elements: 
a. Lay out the items in column order with no wrapping. 
b. Justify the content of the items within the flexbox with space between. 
c. Center each of the items with respect to the cross axis. 


8. Save your changes to the style sheet file and then open code5-2.html in your browser. Test the 
layout under different screen widths, verifying that the div cards always fill up the page grid and 
that for a width small enough, the contents are laid out in a single column. 


9. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code5-3_txt.html, code5-3_print_txt.css, 
code5-3_layout.css, and 1 image file 


CODE 


A list of the top 15 travel sites on the web is shown in Figure 5-59. The style sheet code for the screen 
version has already been written, but you have been tasked to create the style sheet for the print 
version. Complete the web page by writing the print styles and linking them to the web page. 
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Coding Challenge 5-3 example page 
Travel Sites on the Web 


It's easier than ever to find great deals on airfare, hotels, and car rentals using the travel sites 
available on the Web. 


The following are the top 15 most population travel sites on the Web as rated by eBiz/MBA 
| http://www.ebizmba.com/articles/travel-websites ]. 
. Booking = [ http://www.booking.com | 
. TapAdvisor —[ http://www.tripadvisor.com |] 
. Yahoo! Travel — [ http://www.travel_yahoo.com | 
. Expedia — [ http://www.expedia.com | 
. Priceline — [ http://www.priceline.com | 
. Hotels —_[ http://www.hotels.com | 
. Travelocity — [| http://www.travelocity.com | 
. Kayak — [ http://www.kayak.com | 
. Orbitz | http://www.orbitz.com | 
. Hotwire — [ http://www.hotwire.com | 


. HomeAway [| http://www.homcaway.com | 


. TravelZoo | hitp://www.travelzoo.com | 


. AirBnB | hitp://www.airbnb.com | 
. LonelyPlanet = [ http://www-lonclyplanct.com | 


. Viator = | http://www.viator.com | 


Do the following: 


1. Open the code5-3_txt.html and code5-3_print_txt.css files from the html05 » code3 folder. 
Enter your name and the date in each document and save the files as code5-3.html and 
code5-3_print.css respectively. 


2. Go to the code5-3.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code5-3_layout.css and code5-3_print.css files. Use the code5-3_layout.css file 
for screen output and the code5-3_print.css file for printed output. Review the contents of the file 
and then save your changes. 


. Go to the code5-3_print.css file in your editor. 

. Set the printed page size to 8.5 by 11 inches with a 1-inch margin. 

. Remove all underlining from hypertext links. 

. Prevent the browser from inserting page breaks within any nav element. 

. Set the line height of every 14 element nested within a nav and o1 element to 0.3 inches. 


CON DU BW 


. Use the after pseudo-element to display printed hypertext link in the following format: /ink [ url | 
and add the following styles to the after pseudo-element: 


a. Display the ur/ text as an inline block. 
b. Set the left margin of the url text to 20 pixels. 
c. Set the value of the word-wrap property to "break-word". 
9. Save your changes to the file. 
10. View the printed version of the page in your browser to verify that it resembles Figure 5-59. 
11. Submit the completed file to your instructor. 
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Coding Challenge 4 


Data Files needed for this Coding Challenge: code5-4_txt.html, code5-4_debug_txt.css, 
code5-4_layout.css, code5-4_logo.jpg, code5-4_photo.jpg 


You have been asked to revise a website involving responsive design that contains several errors. A 
preview of the page under different screen widths is shown in Figure 5—60. Fix the errors in the code 
for the HTML and CSS file. 


Figure 5-60 Coding Challenge 5-4 example page 


Cutler Shopping Mall Cutler Shopping Mall 


Reopening Soon! 


Reopening Soon! The Cutler Shopping Stl i 

plauniag a GRAND reopening 
with great sales, contests. 
family fun events. aad more 
suprises Pian to join us on 
Magchs 24rd at Sau fox this 
special event! 


The Cutler Shopping Mall is planning a GRAND 
reopening with great sales, contests, family fun events. and 
more surprises. Plan to join us on March 23rd at 9am for 
this special event! 


About the Mall 


& 


About the Mall 


Cutler Mall is home to your favorite stores like Boston Store, 
JCPenney, at Sears, We feature more than 110 specialty stores 
including Aveda, Williams-Sonoma, Banana Republic. Express. 
Aun Taylor, Abercrombie & Fitch. and American Eagle Outfitters 
New specialty stores include Pottery Bam, Coldwater Creek, 
Hollister Co. Abercrombie, Aeropostale, Weathervane, Helzberg 
Diamonds, and Godiva Chocolatier 


Cutler Mall is home to your favorite stores like Boston 
Store, JCPenney, and Sears. We feature more than 110 
Specialty stores including Aveda, Williams-Sonoma, 


The Mall has 24 deliciows eateries, a family playground, Internet 
Kiosk, and baby-sitting facilities, making a visit to the Cutler Mali 
a tre shopping experience 


© Courtesy Patrick Carey 


Banana Republic, Express, Ann Taylor, Abercrombie & 


Fitch, and American Eagle Outfitters. New specialty stores 
include Pottery Barn, Coldwater Creek, Hollister Co., 


Abercrombie, Aeropostale, Weathervane, Helzberg 
Diamonds, and Godiva Chocolatier. 


The Mall has 24 delicious eateries, a family playground, 
Intemet Kiosk, and baby-sitting facilities, making a visit to 
the Cutler Mall a true shopping experience. 


HOME 
ORECTORY 


EVENTS 
JOBS 
CONTACTS 


Cutler Shopping Mall 


Reopening Soon! 


The Cutler Shopping Mall is phaaaing GRANT 
reopening with great sales. contests, family fa 
ecorats, aul more sarprines. Plan to joke ws on 
March 24nd at Sam for this special event? 


About the Mall 


‘Cutler Mall is baie 10 your fivorite etewes like 
Boston Stove, JCPenney. and Sears, We feanwe 
tore than 11D specialty stores imchadine Aveds. 
‘Williams-Soocnas. Banana Repullie. Exprets 
Anu Taytor, Abercrombie & Fite, nid Ametiene 
Engle Outfitters. New specisity sores mriude 
Pottery Bans. Cobtiester Creek. Hollister Co 
Abereromine, Arropoatale Weathervase. Helsters Diamante and Godiva Chocolatier 


The Dall tas 24 delicious cateries 2 fmnily phrygromad, Lotemuct Kiosk. aud baby. citing facilities, 
wanking @ Visit to Ube Cutles Mall a tree sbopplag capericuce 


Do the following: 


1. 


Open the code5-4_txt.html and code5-4_debug_txt.css files from the html05 » code4 folder. 
Enter your name and the date in each document and save the files as code5-4.html and 
code5-4_debug.css respectively. 


. Go to the code5-4.html file in your editor. Within the head section insert 1ink elements linking 


the page to the code5-4_layout.css and code5-4_debug.css files. Review the contents of the file. 


. There is a single error within the head section of the page. Locate the error and fix it. Save your 


changes to the file. 


. Go to the code5-4_debug.css file in your editor. There are 8 separate syntax errors in the 


stylesheet. Locate and correct all eight errors and then save your changes. 


. Test both the code5-4.html andcode5-4_debug.css files in a validator to confirm that both pass 


validation with no errors or warnings reported. 


. View the code5-4.html file in your browser under different screen widths and compare your 


page to Figure 5-60, confirming that your page layout matches the one shown in the figure. 


. Submit the completed file to your instructor. 


© Courtesy Patrick Carey 
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Review Assignments 


Data Files needed for the Review Assignments: tf_print2_txt.css, tf_styles4_txt.css, tf_tips_txt.html, 
2 CSS files, 4 PNG files 


Marjorie meets with you to discuss the redesign of the blog page showing parenting tips. As with 
the other pages you’ve worked on, she wants this page to be compatible with mobile devices, tablet 
and desktop devices, and printers. Marjorie has already written the page content and has done much 
of the initial design work. She needs you to complete the project by writing media queries for the 
different display options. Figure 5-61 shows a preview of the mobile design and the desktop design. 


Figure 5-61 


PRACTICE 


Parenting Tips page 


~ 


RW trusted tnends daycare 


Parenting Tips 
Archive 


mobile version desktop version 
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You'll use several flexboxes to create the layout for these two designs so that the page content 
automatically rescales as the screen width changes. 


Complete the following: 


1. Use your HTML editor to open the tf_tips_txt.html, tf_styles4_txt.css, and tf_print2_txt.css files 
from the html05 » review folder. Enter your name and the date in the comment section of each 
file, and save them as tf_tips.html, tf_styles4.css, and tf_print2.css respectively. 

2. Go to the tf_tips.html file in your editor. Add a viewport meta tag to the document head to set 
the width of the layout viewport equal to the width of the device and set the initial scale of the 
viewport to 1.0. 
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Create links to the following style sheets: a) the tf_base.css file to be used with all devices, b) the 
tf_styles4.css file to be used with screen devices, and c) the tf_print2.css file to be used for 
printed output. 


. Take some time to study the contents and structure of the document, paying special attention to 


the IDs and class names of the elements, and then save your changes. 


. Go to the tf_styles4.css file in your editor. Note that Marjorie has placed all of her styles in the 


tf_designs.css file and imported them into this style sheet. You will not need to edit that style 
sheet file, but you might want to view it to become familiar with her style rules. 


. Go to the General Flex Styles section. Within this section, you'll create a flexible layout that 


varies in response to changing screen widths. 


. In the General Flex Styles section create a style rule for the body element that displays the page 


body as a flexbox flowing in the row direction, wrapping content to a new line as needed. 


. The page content is divided into two section elements with IDs of /eft and right. The left section 


does not need as much of the screen width. Create a style rule for the left section that sets its flex 
growth and shrink rates to 1 and 8 respectively and sets its flex basis size to 130 pixels. 


. The right section requires more screen width. Create a style rule for the right section that sets its 


flex growth and shrink values to 8 and 1 and sets its flex basis size to 351 pixels. 


. Next, set the display of the section element with class ID of tips as a flexbox. Have the content of 


the flexbox flow in the row direction with row wrapping enabled. 


Create a style rule for the article element that lays it out with a flex growth value of 2, flex 
shrink value of 1, and a flex basis size of 351 pixels. 


. The biographical asides within each tips section need to occupy less screen space. Create a style 


rule for the aside element that lays it out with a flex growth value of 1, flex shrink value of 2, 

and a flex basis size of 250 pixels. 

Finally, the horizontal navigation list at the top of the page will also be treated as a flexbox. 

Create a style rule for the nav.horizontal ul selector that displays it as a flexbox in column 

orientation with wrapping. 

Go to the Mobile Devices section and create a media query for screen devices with a maximum 

width of 480 pixels. 

For mobile devices, the vertical list of links to archived parenting tips should be displayed in 

several columns at the bottom of the page. Within the media query you created in the last step, 

add the following style rules: 

a. for the nav.vertical ul selector, create a style rule that displays it as a flexbox in column 
orientation with wrapping. Set the height of the element to 240 pixels. 

b. to give the section element with an ID of /eft a flex order value of 99 to place it near the 
bottom of the page. 

c. to give the body > footer selector an order value of 100 to put it at the page bottom. 

Marjorie wants to hide the navigation list at the top of the page when viewed on a mobile 

device unless the user hovers (or taps) a navicon. Using the technique shown in this tutorial, add 

the following style rules to set the behavior of the navicon within the media query for mobile 

devices: 

a. Display the navicon by creating a style rule for the a#navicon selector to display it as a block. 

b. Set the display property of the nav.horizontal ul selector to none. 

c. Display the navigation list contents in response to a hover or touch by creating a style rule for 


the a#navicon:hovert+ul, nav.horizontal ul:hover selector that sets its display value to 
block. 


Go to the Tablets and Desktop Devices section. Create a media query for screen devices with a 
width of at least 481 pixels. Under the wider screens, the contents of the horizontal navigation 
list at the top of the page should be displayed in several columns. In order to have the list items 
wrap to a new column, add a style rule to the media query that sets the height of the ul element 
within the horizontal navigation list to 160 pixels. 
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18. Save your changes to the style sheet and then open the tf_tips.html file in your browser or 
device emulator. Verify that as you change the screen width the layout of the page automatically 
changes to match the layout designs shown in Figure 5-61. 


Next, you'll create the print styles for the Parenting Tips page. Figure 5-62 shows a preview of the 
output on a black and white printer. 


Figure 5-62 Parenting Tips print version 


Raising a Reader 


TUSTeEa end 


Learning through Play 


Diane Haberstadt 


~ Unree Nhaterrstn v4 ar) matte gpeuer warfare al ature all «free ome of ties She no 
cmetacms if Semmes necuvery Worles Nowence 21 [Rap Meme enaenpie coment anil) ae 
Nerarastioe pmgraen helping <hektres jaar swat the acemes uf the 21 curnary Stw oe sitar th autho wf 


Sandra Turner-Davis, Ph.D. ther ;wpedr teed IRavveng the bapescrer (hill (http Poem cvemphs cemmivete tinal} 
_ (heer 108 the best al Dery wan Ketasels etting (4 beang Wet amt heteret ttvmtepars bs meme 
ey veh ml exper. 
. LN Durer haw is ma pestis (rectame matin sgeubeT aed Lee UAem Apecmt Stee Nee 


erred am the diester of Fanty tatec mom atthe Dezeernty of Bean hart ee ate atv! on the 
pristine Stake fees engin ming eohasanees teafianges 6 Ber tmet 6 
Ue Termer Cleves bere seatarad || Powe prey voryine ore due 47-107 haa aa 
tomes tem e She eee tte hey peal a (he 0) 18 Malcom Fhe cme 

(nenpcre wv evamnple comewurr Rial! et Ds mT wrod Mammo lime san CAN Fon wh sd FS 


page 1 page 2 


© Courtesy Patrick Carey 


19. Go to the tf_print2.css file in your editor. Go to the Hidden Objects section and hide the display 
of the following page elements: all navigation lists, the h1 heading in the body header, the left 
section element, and the body footer. 

20. Go to the Page Box Styles section and set the page size to 8.5 inches by 11 inches with a margin 
of 0.5 inches. 

21. Go the Header Styles section and add a style rule that displays the logo image as a block with a 
width of 100%. 

22. Go to the Typography Styles section and add the following style rules for the text in the printed 
pages: 

a. For headers within the article element, set the bottom margin to 0.2 inches. 
b. For h1 headings within the article element, set the font size to 24 points and the line height 


to 26 points. 

c. For the aside element, set the background color to rgb(211, 211, 211) and add a top margin 
of 0.3 inches. 

d. For h1 headings in aside elements, set the font size to 18 points and the line height to 20 
points. 


e. For images within aside elements, set the width to 0.8 inches. 
f. For paragraphs, set the font size to 12 points with a top and bottom margin of 0.1 inches. 


23. Go to the Hypertext Styles section and add style rules to display all hypertext links in black with 
no underline. Also, insert a style rule that adds the text of the URL after the hypertext link in bold 
with the word-wrap property set to break-word. 
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24. Go to the Page Break Styles section and add the following style rules to 
a. insert page breaks after every aside element. 
b. never allow a page break within an ol, ul, or img element. 
c. set the size of widows and orphans within paragraphs to 3 lines each. 
25. Save your changes to the file. 


26. Reload the tf_tips.html file in your browser and preview its printed version. Verify that your pages 
resemble those shown in Figure 5-62 (there may be differences depending on your browser and 
your printer). 


Case Problem 1 


a Data Files needed for this Case Problem: gp_cover_txt.html, gp_page1_txt.html, gp_page2_txt.html, 


a gp_page3_txt.html, gp_layout_txt.css, gp_print_txt.css, 2 CSS files, 21 PNG files 


< Golden Pulps Devan Ryan manages the website Golden Pulps, where he shares tips on collecting 
and fun stories from the “golden age of comic books”—a period of time covering 1938 through the 
early 1950s. Devan wants to provide online versions of several classic comic books, which are now 
in the public domain. 


He’s scanned the images from the golden age comic book, America’s Greatest Comics 001, published 
in March, 1941, by Fawcett Comics and featuring Captain Marvel. He’s written the code for the HTML 
file and wants you to help him develop a layout design that will be compatible with mobile and desktop 
devices. Figure 5-63 shows a preview of the mobile and desktop version of a page you'll create. 


mobile version desktop version 


© Courtesy Patrick Carey; Source: Comic Book Plus 
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Complete the following: 


1. Using your editor, open the gp_cover_txt.html, gp_page1_txt.html, gp_page2_txt.html, 
gp_page3_txt.html, gp_layout_txt.css, and gp_print_txt.css files from the html05 » case folder. 
Enter your name and the date in the comment section of each file, and save them as gp_cover. 
html, gp_page1.html, gp_page2.html, gp_page3.html, gp_layout.css, and gp_print.css respectively. 

2. Go to the gp_cover.html file in your editor. Add a viewport meta tag to the document head, 
setting the width of the layout viewport to the device width and setting the initial scale of the 
viewport to 1.0. 

3. Create links to the following style sheets: a) the gp_reset.css file to be used with all devices, b) 
the gp_layout.css file to be used with screen devices, and c) the gp_print.css file to be used for 
printed output. 

4. Take some time to study the contents and structure of the file. Note each panel from the comic 
book is stored as a separate inline image with the class name panel along with class names of 
size! to size4 indicating the size of the panel. Size1 is the largest panel down to size4, which is 
the smallest panel. Close the file, saving your changes. 

5. Repeat Steps 2 through 4 for the gp_page1l.html, gp_page2.html, and gp_page3.html files. 

6. Go to the gp_layout.css file in your editor. In this style sheet, you'll create the layout styles 
for mobile and desktop devices. Note that Devan has used the @import rule to import the 
gp_designs.css file, which contains several graphical and typographical style rules. 

7. Go to the Flex Layout Styles section and insert a style rule to display the body element as a 
flexbox oriented as rows with wrapping. 

8. The page body content has two main elements. The section element with the ID sheet contains 
the panels from the comic book page. The article element contains information about the 
comic book industry during the Golden Age. Devan wants more of the page width to be 
given to the comic book sheet. Add a style rule that sets the flex growth and shrink rate of the 
section#sheet selector to 3 and 1 respectively and set its flex basis size to 301 pixels. 

9. Less page width will be given to the article element. Create a style rule to set its flex growth 
and shrink values to 1 and 3 respectively and set its flex basis size to 180 pixels. 

10. Go to the Mobile Devices section and create a media query for screen devices with a maximum 
width of 480 pixels. 

11. With mobile devices, Devan wants each comic book panel image to occupy a single row. Create a 
style rule that sets the width of img elements belonging to the panel class to 100%. 

12. For mobile devices, Devan wants the horizontal navigation links to other pages on the Golden 
Pulps website to be displayed near the bottom of the page. Within the media query, set the flex 
order of the nav.horizontal selector to 99. 

13. Create a style rule to set the flex order of the body > footer selector to 100. 

14. Go to the Tablet and Desktop Devices: Greater than 480 pixels section and create a media query 
that matches screen devices with widths greater than 480 pixels. 

15. For tablet and desktop devices, you'll lay out the horizontal navigation list as a single row of 
links. Within the media query, create a style rule for the nav.horizontal ul selector that displays 
that element as a flexbox, oriented in the row direction with no wrapping. Set the height of the 
element to 40 pixels. 

16. For the nav.horizontal ul 1:4 selector set the flex growth shrink, and basis size values to 1, 1, and 
auto respectively so that each list items grows and shrinks at the same rate. 

17. With wider screens, Devan does not want the panels to occupy their own rows as is the case 
with mobile devices. Instead, within the media query create style rules, define the width of the 
different classes of comic book panel images as follows: 

a. Set the width of sizel img elements to 100%. 
b. Set the width of size2 img elements to 60%. 
c. Set the width of size3 img elements to 40%. 
d. Set the width of size4 img elements to 30%. 

18. Save your changes to the file and then open the gp_cover.html file in your browser or device 

emulator. Click the navigation links to view the contents of the cover and first three pages. Verify 
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that with a narrow screen the panels occupy their own rows and with a wider screen the sheets 

are laid out with several panels per row. Further verify that the horizontal navigation list is placed 

at the bottom of the page for mobile devices. 
19. Devan also wants a print style that displays each comic book sheet on its own page and with 
none of the navigation links. Go to the gp_print.css style sheet in your editor. Add style rules to 

a. hide the nav, footer, and article elements. 

b. set the width of the element referenced by the section#sheet selector to 6 inches. Set the top/ 
bottom margin of that element to 0 inches and the left/right margin to auto in order to center 
it within the printed page. 

c. set the width of img elements belong to the size1 class to 5 inches, size2 images to 3 inches, 
size3 images to 2 inches, and size4 images to 1.5 inches. 

20. Save your changes to the file and then reload the contents of the comic book pages in your 
browser and preview the printed pages. Verify that the printed page displays only the website 
logo, the name of the comic book, and the comic book panels. 


Case Problem 2 


Data Files needed for this Case Problem: cw_home_txt.html, cw_styles_txt.css, 2 CSS files, 
10 PNG files 


Cauli-Wood Gallery Sofia Fonte is the manager of the Cauli-Wood Gallery, an art gallery and coffee 
shop located in Sedona, Arizona. She has approached you for help in redesigning the gallery's 
website to include support for mobile devices and tablets. Your first project will be to redesign the 
site’s home page following the principles of responsive design. A preview of the mobile and desktop 
versions of the website’s home page is shown in Figure 5-64. 


CHALLENGE 
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Cauli-Wood Gallery 
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Right: © Tischenko Irina/Shutterstock.com; © re_bekka/Shutterstock.com; © Boyan Dimitrov/Shutterstock.com; 
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© DeepGreen/Shutterstock.com; Source: Facebook; Source: Twitter, Inc. 

Left: © Tischenko Irina/Shutterstock.com; © Courtesy Patrick Carey; © re_bekka/Shutterstock.com; 
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Sofia has already written much of the HTML code and some of the styles to be used in this project. 
Your job will be to finish the redesign and present her with the final version of the page. 


Complete the following: 


1. Using your editor, open the cw_home_txt.html and cw_styles_txt.css files from the html05 > 
case2 folder. Enter your name and the date in the comment section of each file, and save them 
as cw_home.html and cw_styles.css respectively. 

2. Go to the cw_home.htnul file in your editor. Within the document head, insert a meta element 
that sets the browser viewport for use with mobile devices. Also, create links to cw_reset.css and 
cw_styles.css style sheets. Take some time to study the contents and structure of the document 
and then close the file saving your changes. 

3. Return to the cw_styles.css file in your editor. At the top of the file, use the @import rule to 
import the contents of the cw_designs.css file, which contains several style rules that format the 
appearance of different page elements. 

Explore 4. At the bottom of the home page is a navigation list with the ID bottom containing 
several ul elements. Sofia wants these ul elements laid out side-by-side. Create a style rule for the 
nav#bottom selector displaying its element as a flexbox row with no wrapping. Set the justify- 
content property so that the flex items are centered along the main axis. 

5. For the nav#bottom ul selector, create a style rule to set the flex growth rate to 0, the shrink rate 
to 1, and the basis value to 150 pixels. 
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Sofia wants more highly contrasting colors when the page is displayed in a mobile device. Create 
a media query for mobile screen devices with maximum widths of 480 pixels. Within that media 
query, insert a style rule that sets the font color of the body element to rgb(211, 211, 211) and 
sets the body background color to rgb(51, 51, 51). 


. Sofia also wants to reduce the clutter in the mobile version of the home page. Hide the following 


elements for mobile users: the aside element, any img element within the article element, 
and the spotlight section element. 


. At the top of the web page is a navigation list with the ID top. For mobile devices, create a style 


rule for the nav#top ul selector, displaying the element as a flexbox row with wrapping. For each 
list item within the nav#top ul selector, set the font size to 2.2em. Size the list items by setting 
their flex values to 1 for the growth and shrink rates and 130 pixels for the basis value. 


. Under the mobile layout, the six list items in the top navigation list should appear as square 


blocks with different background images. Using the selector nav#top ul li:nth-of-type (1) 
for the first list item, create a style rule that changes the background to the background image 
cw_image01.png. Center the background image with no tiling and size it so that the entire image 
is contained within the background. 

Repeat the previous step for the next five list items using the same general format. Use the 
cw_image02.png file for background of the second list item, the cw_image03.png file for the 
third list item background, and so forth up through the nav4top ul li:nth-of-type(é6) selector. 
Explore 11. Sofia has placed hypertext links for the gallery’s phone number and e-mail address 
in a paragraph with the ID /inks. For mobile users, she wants these two hypertext links spaced 
evenly within the paragraph that is displayed below the top navigation list. To format these links, 
create a style rule that displays the element referenced by the p#links selector as a flexbox row 
with no wrapping, then add a style that sets the value of the justify-content property to 
space-around. 

She wants the telephone and e-mail links to be prominently displayed on mobile devices. For 
each p#links a selector, apply the following style rule that: a) displays the link text in white on 
the background color rgb(220, 27, 27), b) sets the border radius around each hypertext to 20 
pixels with 10 pixels of padding, and c) removes any underlining from the hypertext links. 

Next, you'll define the layout for tablet and desktop devices. Create a media query for screen 
devices whose width is 481 pixels or greater. Within this media query, display the body element 
as a flexbox in row orientation with wrapping. 

The page body has four children: the header, the footer, the article element, and the aside 
element. The article and aside elements will share a row with more space given to the 
article element. Set the flex growth, shrink, and basis values of the article element to 2, 1, 
and 400 pixels. Set those same flex values for the aside element to 1, 2, and 200 pixels. 
Explore 15. For tablet and desktop devices, the top navigation list should be displayed as a 
horizontal row with no wrapping. Enter a style rule for the nav#top ul selector to display that 
element as a flexbox with a background color of rgb(51, 51, 51) and a height of 50 pixels. Use 
the justify-content and align-items property to center the flex items within that flexbox 
both horizontally and vertically. 

For the nav#top ul 13 selector, create a style rule for those list items, setting the flex growth rate 
to 0, the flex shrink rate to 1, and the basis value to 80 pixels. 


Sofia doesn’t want the links paragraph displayed for tablet and desktop devices. Complete the 
media query for tablet and desktop devices by creating a style rule for the p#links selector to 
hide the paragraph. 

Save your changes to the style sheet and then open the cw_home.htnll file in your browser or 
device emulator. Verify that the layout and contents of the page switch between the mobile 
version and the tablet/desktop version shown in Figure 5-64 as the screen width is increased and 
decreased. 


TUTORIAL 6 


OBJECTIVES 


Session 6.1 

e Explore the structure of a web 
table 

¢ Create table heading and data 
cells 

e Apply CSS styles to a table 

* Create cells that span multiple 
rows and columns 

e Add a caption to a table 


Session 6.2 

¢ Create row and column groups 

¢ Apply styles to row and column 
groups 

¢ Display page elements in table 
form 

¢ Create a multi-column layout 


STARTING DATA FILES 


Working with 
Tables and 
Columns 


Creating a Program Schedule for a Radio 
Station 


= 
_ 
m 


Case | Dakota Listener Radio 


Kyle Mitchell is the program director at DLR (Dakota Listener Radio), 
a public radio station broadcasting out of Bismarck, North Dakota. 
Kyle has begun upgrading the DLR website to provide listeners with 
more information about the station’s programs and policies. 


The new website will include pages listing the DLR morning, 
afternoon, and evening schedules. Kyle believes that this information 
is best conveyed to the listener in a table, with days arranged in 
separate table columns and times within each day placed in separate 
table rows. Kyle has never created a web table, so he has come to 
you for help. He wants the table to be informative and easy to read, 
so you enhance the appearance of the web page with CSS styles. 


dir_evenings_txt.html dir_mornings_txt.html code6-1_txt.html 
dIr_lw0414_txt.html dlr_columns2_txt.css code6-1_table_txt.css 
dlr_columns_txt.css dir_tables2_txt.css +1 file 
dir_tables_txt.css + 5 files 

+7 files 


code4 
code6-2_txt.html code6-3_txt.html code6-4_txt.html 
code6-2_table_txt.css code6-3_columns_txt.css code6-4_debug_txt.css 
+1 file + 2 files +1 file 


mi_pricing_txt.html lht_sept_txt.html 
mi_tables_txt.css Iht_columns_txt.css 
+ 8 files Iht_tables_txt.css 


+ 6 files HTML 451 
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Session 6.1 Visual Overview: 


The table element 
encloses a web table. 


a : <table class="schedule"> 

e caption element : i A 5 
Ant st it <caption>ALL Times Central</caption> 
caption. <tr> 


<th>Time</th> 
<th>Mon</th> 
<th>Tue</th> 
The th element encloses <th>Wed</th> 
the table header cells. <th>Thu</th> 
<th>Fri</th> 
<th>Sat</th> 
<th>Sun</th> 
Th | RaeER 
e tr element 
bs <th>6:00 PM</th> 
The td element encloses <td colspan="7">National News</td> 
the cells that contain </tr> 
table data. 
q <tr> 
Cells that cover several <th>6230 PM</th> 
columns are indicated by colspan="7">World News</td> 
the colspan attribute. </tr> 
<tr> 


<th>7:00 PM</th> 


<td rowspan="2">Opera Fest</td> 
GUS Hoy <td rowspan="2">Radio U</td> 
rows are indicated by : 
the rowspan attribute. <td rowspan="2">Science Week</td> 
<td rowspan="2">The Living World</td> 
<td>Word PLlay</td> 
<td>Agri-Week</td> 
<td rowspan="2">Folk Fest</td> 
</tr> 
<tr> 
<th>7:30 PM</th> 
<td>Brain Stew</td> 
<td>Bismarck Forum</td> 
</tr> 
</table> 
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Structure of a Web Table 


The first table row 
is made up of all 
header cells. 


The two data 
cells span seven 
columns. 


The browser renders the 
web table with bold 
headers and spanning cells. 


6:30 PM 
7:00 PM 


World News 


Word Play Agri-Week 


Radio U |Science Week aA 
Bismarck Forum 


Opera Fest The Living World 


All Times Central 


These four data 
cells span two 
rows each. 


The table caption 
is placed at the 
bottom-right 
corner of the table. 


table.schedule { 
background: white; 


The border-collapse border: 10px outset rgb(153, ©, 153); 
exe any ele naan border-collapse: collapse}; 

table borders are separated : 

or collapsed into each other. font-size: 0.75em; 


width: 100%; 


} 


table.schedule th, table.schedule td { 
border: 1px solid gray; 


} 
The caption-side property table.schedule caption { 
places the table caption at Sate ° 2 
either the top or bottom of cepevon : side: : bottom; 
ara wal wale. text-align: right; 
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Introducing Web Tables 


In this tutorial, you explore how to use HTML to mark table data in the form of a web 
table. A web table is an HTML structure consisting of multiple table rows with each 
row containing one or more table cells. The cells themselves can contain additional 
HTML elements such as headings, paragraphs, inline images, and navigation lists. Thus, 
a web table is an effective tool for organizing and classifying your web page content. 


Marking Tables and Table Rows 


Each web table consists of a table element containing a collection of table rows 
marked using the tr (table row) element in the following general structure 


<table> 

<2ers 
table cells 

</tr> 

<tr> 
table cells 

</tr> 


</table> 


where table cells are the cells within each row. Tables are considered block-level 
elements appearing by default on a new line within the web page. The dimension or 
size of the table is defined by the number of table rows and the number of cells within 
those rows. 
To see how table content can be created using the table and tr elements, you 
Shewh vou rebles meet with Kyle in his office at DLR to discuss the design for his page describing DLR’s 
beforehand so that youcan evening schedule. He wants you to place the schedule in a table, similar to the one 


visualize the placement of shown in Figu re 6-1. 
the table rows and cells. 


National 


National National National 


National National National 


News News News News News News News 
6:30 World World World World World World World 
News News News News News News News 
7:00 | Opera Fest | Radio U Science | The Living Word Agri-Week | Folk Fest 
Week World Play 
7:30 Brain Stew | Bismarck 
Forum 
8:00 | The Classical Music Connection Old Time | Saturday |The Indie 
Radio Nite Connection 
po Jazz 
8:30 The Inner 
Mind 
9:00 Open Mike 
Nite 
9:30 
10:00 World World World World World World World 
News News News News News News News 
Feed Feed Feed Feed Feed Feed Feed 


REFERENCE 


Tutorial 6 Working with Tables and Columns | HTML 5 and CSS Wah] \ are333 


Kyle’s proposed table contains 10 rows: the first row contains headings for each of 
the table columns and the remaining rows list the DLR programs airing from 6:00 p.m. 
to 10:30 p.m. in half-hour intervals. Notice that some programs last longer than one- 
half hour and thus will cover multiple rows. Kyle has already created that web page 
that will contain this table and written style sheets for the page’s layout, graphics, and 


typography. 


Marking a Web Table and Table Rows 


e To mark a web table and the table rows, enter 


<table> 

<tr> 
table cells 

</tr> 

<tr> 
tealolle ELS) 

</tr> 


</table> 


where <table> marks the table element, <tr> marks each table row, and table 
cells are the cells within each row. 


You start working on his page by adding the first three rows of his proposed table 
within a table element. You also include a class attribute, placing the table in the 
schedule class to distinguish it from other tables that may exist on the DLR website. 


To start working on the evening schedule page: 


D 1. Use your editor to open the dir_evenings_txt.html file from the htm|06 > 
tutorial folder. Enter your name and the date in the comment section of the 
file and save it as dlr_evenings.html. 


DB 2. Scroll down the document to the section element with the id “main” and 
add the following table and tr elements after the initial paragraph in the 
section. 


<table class="schedule"> 
<tr> 
</tr> 
<tr> 
</tr> 
<tr> 
</tr> 
</table> 


Figure 6-2 shows the placement of the table and tr elements in the 
document. 
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Figure 6-2 Marking a table and table rows 


table element marks t aa slatcarhe tol 
the web table oe alg i 


tr element marks 
each table row 


<section id="main"> 
<img src="dlr_logo.png" alt="DLR" /> 
<h2>DLR Nightly Schedule</h2> 
<p>DLR airs lListener-supported public radio in Bismarck, 
North Dakota from 5:00 a.m. to 10:30 p.m. 
You can <a href="#">Listen Live</a> to streaming audio 
of our broadcast. Please refer below for our current 


</tr> 
<tr> 
</tr> 
<tr> 


</tr> | sets this table in its 
</table> own class 


class attribute with a 
value of “schedule” 


</section> 


BD 3. Take some time to scroll through the rest of the document to become familiar 
with its content and structure and then save your changes to the file, but do 
not close it. 


At this point, you have a table with three rows but no content. Your next task is to 
add table cells to each of those rows. 


Marking Table Headings and Table Data 


Web tables support two types of table cells: header cells that contain content usually 
placed at the top of a column or the beginning of a row and data cells that contain 
content within those columns and rows. A header cell is marked using the th element. 
The default browser style for header cells is to display the text of the header in bold font 
and centered horizontally within the cell. 

Kyle wants you to mark the cells in the first row of the radio schedule as header cells 
because those cells contain information describing the contents of each table column. 
He also wants the first cell in each of the remaining rows to be marked as a header cell 
because those cells identify the time of day in which each program airs. You start by 
adding header cells to the first three rows of the schedule table. 


To mark table header cells: 


D 1. In the first row of the table you just created in the dir_evenings.htm| file, 
create header cells by inserting the following th elements: 


<th>Time</th> 
<th>Mon</th> 
<th>Tue</th> 
<th>Wed</th> 
<th>Thu</th> 
<th>Fri</th> 
<th>Sat</th> 
<th>Sun</th> 
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HTML 457 


Note that since these headers cells are nested within a tr element, they will 
all appear within the same table row. 


BD 2. In the second row of the table, insert the following th element: 
<th>6:00 PM</th> 
D 3. Inthe third table row, insert the header cell: 


<th>6:30 PM</th> 


These cells are the headers for your table rows. Figure 6-3 highlights the 
newly added header cells in the table. 


Figure 6-3 Marking table header cells 


<table class="schedule"> 


<tr> 
<th>Time</th> 
<th>Mon</th> 
Ree Seen icine ini 
the first row - identify <thoWed</th> 
the content of each <th>Thu</th> 
column <th>Fri</th> 
<th>Sat</th> 
<th>Sun</th> 
</tr> 
<tr> 
<th>6:00 PM</th> 


header cells at the start 
of each row identifies 
the row content 


</tr> 

a i AP 

<th>6:30 PM</th> 
</tr> 

</table> 


BD 4. Save your changes to the file and then load dir_evenings.html in your 
browser. Verify that the table shows three rows: the first row contains the text 
“Time” followed by the days of the week. The second and third rows display 
the 6:00 PM and 6:30 PM times. All text is displayed in a bold font. 


Data cells that do not function as headers for table rows or columns are marked 
using the td element. The default browser style for data cells is to display data cell text 
as unformatted text, left-aligned within the cell. 


Marking Header Cells and Data Cells 
¢ To mark a header cell, enter 
<thscontent</th> 


where content is the content of the header cell, such as text or images. 
e To mark a data cell, enter 


REFERENCE 


<td>scontent</td> 


HTML 458 


DLR airs national and world news at 6:00 and 6:30, respectively, every night of the 
week. You use table data cells to mark the names of these DLR programs. 


To mark table data cells: 


DB 1. Within the second row of the table, add the following seven td elements 
after the initial th element: 


<td>National 
<td>National 
<td>National 
<td>National 
<td>National 
<td>National 
<td>National 


News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 


HTML 5 and CSS | Tutorial 6 Working with Tables and Columns 


2. Within the third table row, insert another seven td elements listing the World 


News program after the initial th element: 


<td>World 
<td>World 
<td>World 
<td>World 
<td>World 
<td>World 
<td>World 


Figure 6-4 highlights the newly added data cells in the second and third rows 
of the table. 


— Figureo-4 6-4 Marking table data cells 


News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 


the td element marks 

table cell content that is 
not considered the head 
of a row or column 


BD 3. Save your changes to the file and then open the dlr_evenings.html file 
in your browser. Figure 6-5 shows the current appearance of the program 


schedule table. 


<tr> 


<th>6:00 PM</th> 


<td>National 
<td>National 
<td>National 
<td>National 
<td>National 
<td>National 
<td>NationaL 
</tr> 
<tr> 


<th>6:30 PM</th> 


<td>world 
<td>world 
<td>World 
<td>World 
<td>World 
<td>World 
<td>world 


</tr> 
</table> 


News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 


News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
News</td> 
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Initial layout of the program schedule table 


~ 


DLR Nightly Schedule 


DLR airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 


Resclercalle p.m. You can Listen Live to streaming audio of our broadcast. Please refer below for our 
current nightly schedule. 
Time Mon Tue Wed Thu fri Sat Sun 
6:00 National Nationa! National National National National National 
header cells PM News News News News News News News 


6:30 World News World News World News World News World News World News World News 


PM 


© Courtesy Patrick Carey 


Note that the header cells are displayed in a bold font while the data cells 
are not because of the default table styles employed by the browser. 


Trouble? If your table looks different from the one shown in Figure 6-5, you 
might have inserted an incorrect number of table cells. Check your code 
against the code shown in Figure 6-4. 


The table you created for Kyle has three rows and eight columns. The number of 
columns is determined by the row with the most cells. Thus, if one row has four cells 
and another row has five, the table will have five columns. The row with only four cells 
will have an empty space at the end, where the fifth cell should be. 

The structure of the program schedule table is a bit difficult to see because there 
are no borders around the table, table rows, or table cells. You can modify the table’s 
appearance through the use of a CSS style sheet. You start creating this style sheet now, 
first focusing on adding borders to the table. 


Adding Table Borders with CSS 


Using the CSS border property, borders can be added to any part of a web table, 
including the table itself, table rows, and individual table cells. The borders need not be 
the same styles, for example, you can have one set of borders for the table rows and a 
different set of borders for individual cells within those rows. 

Kyle would like you to add a 10-pixel purple border in the outset style around the 
entire program schedule table. He also wants the table background color changed to 
white, the font size of the table text set to 0.75em, and the width set to 100% so that 
it extends through the entire width of the main page section. Finally, Kyle wants you 
to add a 1-pixel solid gray border around each table cell. Add these style rules to the 
dir_tables.css style sheet file, which you create now. 
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To add borders to a table: 


D 1. Use your editor to open the dir_tables_txt.css file from the html06 » tutorial 
folder. Enter your name and the date in the comment section of the file and 
save it as dir_tables.css. 


D 2. Within the Table Styles section, add the following style rule to place a border 
around tables belonging to the schedule class: 


table.schedule { 
background: white; 
border: 10px outset rgb(153, 0, 153); 
font-size: 0.75em; 
width: 100%; 


} 


D 3. Within the Table Cells Styles section, add the following style rule to place a 
border around each header cell and data cell within tables belonging to the 
schedule class. 


table.schedule th, table.schedule td { 
border: 1px solid gray; 


} 


Figure 6-6 highlights the newly added styles to create the table borders. 


Figure 6—6 Adding styles to the table and table cells 


sets the table 
Ee to aie 
table.schedule { 
adds a 10-pixel purple background: whi ol 


outset border around border: 10px outset rgb(153, 0, 153); 
the entire table font-size: 0.75em; 
width: 100%} 


sets the table width } sets the table font 
to 100% of its parent size to 0.75em 
element e 

adds a 1-pixel solid table.schedule th, table.schedule td { 
gray border to every border: 1px solid gray; 

table cell } 


BD 4. Save your changes to the style sheet and then reload the dlr_evenings.html 
file in your editor. 


BD 5. Within the document head and directly before the closing </head> tag, add 
the following 1ink element to link the document to the dlr_tables.css style 
sheet: 


<link href="dlr tables.css" rel="stylesheet" /> 
BD 6. Save your changes to the file and then reload the dir_evenings.html file in 
your browser. 


Figure 6-7 shows the revised appearance of the table with the newly added 
borders. 


Tutorial 6 Working with Tables and Columns | HTML 5 and CSS (abut Bey 


Figure 6-7 Program schedule with borders 


DLR airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 
p.m. You can Listen Live to streaming audio of our broadcast. Please refer below for our 
current nightly schedule, 


border around 
the entire table 


Time Mon Tue Wed The Fri Sat Sun 
6:00 PM National News National News National News National News National News ational News National News 


borders around 6:30 PM Workd News Works News Workd News Workd News Wortd News Wortd Mews Wortd News 
table cells 


The default browser style is to separate the border around the entire table from the 
borders around individual table cells, creating additional space in the table layout. 
Another style choice is to collapse the borders into each other. Figure 6-8 shows the 
impact of both style choices. 


Figure 6-8 Separate and collapsed borders 


separate borders collapsed borders 


To choose between the separate or collapsed borders model, apply the following 


eee ee border-collapse property to the table element 


in the HTML code, the border-collapse: type; 

border-collapse 

property can produce where type is either separate (the default) or collapse. If the separate borders 
unexpected results in model is used, the spacing between the borders is set by adding the following 


versions of Internet 


ee border-spacing property to the table element 


border-spacing: value; 


where value is the space between the borders in one of the CSS units of measure. 
For example, the following style rule specifies that all borders within the table should 
be separated by a distance of 10 pixels: 


table { 
border-collapse: separate; 
border-spacing: 10px; 


} 


In the collapsed borders model, borders from adjacent elements are merged together 
to form a single border, but the borders are not simply moved together, instead they 
are joined in a new style that combines features of both borders. For example, if 
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two adjacent 1-pixel-wide borders are collapsed together, the resulting border is not 
2-pixels wide, but only 1-pixel wide. 

The situation is more complicated when adjacent borders have different widths, 
styles, or colors that cannot be easily combined. For example, how would you combine 
an outset red border and a solid blue border into a single border of only one color 
and style? To reconcile the differences between adjacent borders, CSS employs the 
following five rules, listed in order of decreasing precedence: 

1. If either border has a border style of hidden, the collapsed border is hidden. 

2. A border style of none is overridden by any other border style. 

3. If neither border is hidden, the style of the wider border takes priority over the 
narrower border. 

4. If the two borders have the same width but different styles, the border style with 
the highest priority is used. Double borders have the highest priority, followed by 
solid, dashed, dotted, ridge, outset, groove, and finally, inset borders. 

5. If the borders differ only in color, the color of the element in the table with the 
higher priority takes precedence. Precedence is given first to borders around 
individual table cells, followed by borders for table rows, row groups, columns, 
and column groups; and finally, the border around the entire table. You will learn 
about row groups, columns, and column groups later in this tutorial. 

Any situation not covered by these rules is left to browsers to determine which 
border dominates when collapsing the two borders. Figure 6-9 provides an example of 
the first rule in action. In this example, the border around the entire table is hidden but 
a 1-pixel blue border is assigned to the cells within the table. As shown in the image 
on the right, when collapsed, any cell borders adjacent to the table border adopt the 
hidden border property. 


— Figure6-9 6-9 Reconciling hidden borders 


in the collapsed borders model, 
the hidden border around the 
table takes precedence over the 
blue borders for individual cells 


separate borders collapsed borders 


in the separate borders model, 
the border around the table is A fe 
hidden and the border around 
each cell is shown in blue 
[> | 


table {border-style: hidden; table {border-style: hidden; 
border-collapse: separate; } border-collapse: collapse; } 
td {border: lpx solid blue;} td {border: lpx solid blue;} 


Figure 6-10 shows what happens when two borders of the same width but different 
styles meet. In this case, because of Rule 4, the table cell borders with the double blue 
lines take precedence over the solid red line of the table border when the two borders 
are collapsed into one. 
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Figure 6-10 Reconciling different border styles 


in the collapsed borders model, 
double borders around individual 
cells takes precedence over the 
singe border around the entire table 


separate borders 


in the separate borders 
model, a single red border is 
placed around the entire table 


and a double blue border is 
placed around individual cells 


table {border-style: 5px solid red; 
border-collapse: separate; } 
td {border: 5px double blue;} 


table {border-style: 5px solid red; 


td 


collapsed borders 


border-collapse: collapse; } 
{border: 5px double blue;} 


Although the collapsed borders model appears more complicated at first, the rules 
are reasonable and allow for a wide variety of border designs. 


Styling Table Borders 


border-collapse: type; 


merge all adjacent borders. 


REFERENCE 


border-spacing: value; 


¢ To define the table borders model, apply the style 


where type is separate (the default) to create separate borders or collapse to 


e To set the space between separated borders, apply the style 


where value is the space between the borders in any of the CSS units of measure. 


For the DLR evening program schedule, Kyle thinks the table would look better with 
collapsed borders and asks you to modify the table style sheet. 


To collapse the table borders: 


BD 1. Return to the dir_tables.css file in your editor. 


DB 2. Add the style border-collapse: collapse; to the style rule for the 
schedule table. Figure 6-11 highlights the newly added style. 
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Figure 6-11 Setting the border collapse style 


table.schedule { 

background: white; 

border: 10px outset rgb(153, 0, 153); 
border-collapse: collapse}; 

font-size: ©.75em; 

width: 100%; 


sets the borders within 
the table to collapse 
into one another 


BD 3. Save your changes to the style sheet and then reload the dlr_evenings.html 
file in your browser. 


Figure 6-12 shows the appearance of the table with the collapsed borders. 


Figure 6-12 Program schedule with collapsed borders 


DLR Nightly Schedule 


DLR airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 
p.m. You can Listen Live to streaming audio of our broadcast. Please refer below for our 
current nightly schedule. 


spacing between 
the borders has 
been removed 


Time Mon Tue Wed The Fri ‘ Sun 


6:00 PM Nationa News National News ational News National News National News National News Mational News 
6:30 PM World News World Mews World News World Neves World News World News World News 


Kyle remarks that the schedule information for the 6:00 p.m. and 6:30 p.m. timeslots 
is highly redundant because the National News and World News programs always air 
at those times every day of the week. He thinks that the schedule would be easier to 
read if those programs are entered only once with the table cell text extending across 
the week. You can achieve this effect using spanning cells. 


Spanning Rows and Columns 


A spanning cell is a single cell that occupies more than one cell row and/or column. 
Spanning cells are created by adding either or both of the following rowspan and 
colspan attributes to either td or th elements 


rowspan="rows" colspan="cols" 


where rows is the number of rows that the cell will occupy and cols is the number 
of columns. The spanning starts in the cell where you put the rowspan and colspan 
attributes, and goes to the right and downward from that location. For example, to 
create a data cell that spans three rows and two columns, enter the following td 
element: 


<td rowspan="3" colspan="2" > ... </td> 


It is important to remember that when a cell spans multiple rows or columns, it 
pushes other cells to the right or down. If you want to maintain the same number 
of rows and columns in your table, you must adjust the number of cells in a row or 
column that includes a spanning cell. To account for a column-spanning cell, you 
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have to reduce the number of cells in the current row. For example, if a table covers 
five columns, but one of the cells in a row spans three columns, you need only three 
table cells in that row: two cells that occupy a single column each and the one cell that 
spans the other three columns. 


Creating Cells that Span Rows and Columns 


¢ To create a cell that spans several columns, add the following attribute to td or th 
element 


colspan="cols" 


where cols is the number of columns covered by the cell. 
° To create a cell that spans several rows, add the following attribute to td or th 
element 


REFERENCE 


rowspan=" rows" 


where rows is the number of rows covered by the cell. 


To see how column-spanning cells work, you replace the cells for the National News 
and World News programs that currently occupy seven cells each with a single cell 
spanning seven columns in each row. 


To create a column-spanning cell: 
BD 1. Return to the dir_evenings.html file in your editor. 


DB 2. Go to the schedule table and for the second table cell in both the second 
and third rows of the table, add the attribute 


colspan="7" 


to the opening <td> tag. 


Figure 6-13 highlights the revised code for the schedule table. 
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Figure 6-13 Spanning several columns with a single cell 


remaining six td 
elements removed from 
the second and third 
rows to keep the size at 
8 total columns 


<table class="schedule"> 

<tr> 
<th>Time</th> 
<th>Mon</th> 
<th>Tue</th> 
<th>Wed< /th> 
<th>Thu< /th> 
<th>Fri</th> 
<th>Sat</th> 
<th>Sun</th> 

</tr> 

<tr> 
<th>6:00 PM</th> 
<td colspan="7"> 

</tr> 

<tr> 
<th>6:30 PM</th> 
<td colspan="7">World News</td> 

</tr> 

</table> 


ational News</td> 


sets each cell 
to span 7 
columns within 
its row 


BD 4. Save your changes to the file and then reload the dir_evenings.htm! file in 
your browser. 


Figure 6-14 shows the revised appearance of the table with column-spanning 
cells in the second and third rows. 


Figure 6-14 Column-spanning cells 


the second cell in 
both rows 2 and 3 
spans seven columns 


p.m. You can Listen Live to stream 
current nightly schedule. 


DLR Nightly Schedule 


DLR airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 
g audio of our broadcast. Please refer below for our 


Mon 
National News 
Wortd News 


The rest of the evening schedule shown earlier in Figure 6-1 includes programs that 
last longer than 30 minutes and thus will need to span several rows. To maintain a row 
layout with row-spanning cells, you need to remove extra cells from the rows below 
the spanning cell. Consider the table shown in Figure 6-15, which covers three rows 
and four columns. The first cell from the first row spans three rows. You need four table 
cells in the first row, but only three in the second and third rows. This is because the 
spanning cell from the first row occupies the position of the first cell in the second and 


third rows. 
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Figure 6-15 Row-spanning cells 


<table> 
<tr> 


<td rowspan="3">1: This cell spans three rows</td> 


<td>2</td> 
<td>3</td> 
<td>4</td> 
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four table cells 
in the first row 
</tr> 
<tr> 
<td>5</td> 
only three cote 
<td>7</td> 
table cells “ees 


are required <tr> F 4 
for the second plete 


; <td>9</td> 
and third rows <td21lo0</td> 


</tr> 
</table> 


HTML code 


io) 
Ww 
& 


nn 


1: This cell spans three rows (5 


oo 
ve] 


10 


resulting table 


The 7:00 p.m. to 8:00 p.m. section of the DLR schedule contains several programs 
that run for an hour. To insert these programs, you create row-spanning cells that span 
two rows in the schedule table. To keep the columns lined up, you must reduce the 
number of cells entered in the subsequent row. Enter the next two rows of the program 
schedule table now. 


To create row-spanning cells: 
BD 1. Return to the dir_evenings.html file in your editor. 
BD 2. Directly above the closing </table> tag, insert the following table row: 


Siena 
<th>7:00 PM</th> 
<td rowspan="2">Opera Fest</td> 
<td rowspan="2">Radio U</td> 
<td rowspan="2">Science Week</td> 
<td rowspan="2">The Living World</td> 
<td>Word Play</td> 
<td>Agri-Week</td> 
<td rowspan="2">Folk Fest</td> 
</tr> 


BD 3. Add the following row for the programs that start at 7:30 p.m.: 


<tr> 
<th>7:30 PM</th> 
<td>Brain Stew</td> 
<td>Bismarck Forum</td> 
</tr> 


Figure 6-16 highlights the revised code for the schedule table. 
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Figure 6-16 Inserting cells that span two rows 


<tr 

tho6:30 PM</th> 

<td colspan="7">World News</td> 
</tr> 
<tr> 

<th>7:00 PM</th> 
td rowspan="2">0pera Fest</td> 
td rowspan="2">Radio U</td> 
td rowspan="2">Science Week</td> 
td rowspan="2">The Living World</td> 
<tdoWord Play</td> 
<td>Agri-Week</td> 
<td rowspan="2">Folk Fest</td> 
</tr> 
<tr> 

<th>7:36 PM</th> 

<td>Brain Stew</td> 

<td>Bismarck Forum</td> 
</tr> 


table> 


cells span 
two rows 


BD 4. Save your changes to the file and then reload the dir_evenings.htm! file in 


your browser. 


Figure 6-17 shows the schedule for programs airing at 7:00 p.m. and 
7:30 p.m. 


Figure 6-17 Program schedule through 7:30 p.m. 


Sj — 


You can create even more 
complex layouts by nesting 
tables inside table cells. 


DLR Nightly Schedule 


DLR airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 
p.m. You can Listen Live to streaming audio of our broadcast. Please refer below for our 
current nightly schedule. 


Time 
6:00 PM 
6:30 PM 
7:00 PM 
7:30 PM 


National News 


World News 


word Play Agel Week 
Opera Fest RadoU Sdence Week The Living Workd Folk Fest 
Brain Stew Giemarck Forum 


cells spanning 
two rows 


The final part of the evening schedule includes the program The Classical Musical 
Connection, which spans two hours on Monday through Thursday. Like the news 
programs, you don’t want to repeat the name of the show each day; and like the five 
hour-long programs you just entered, you don’t want to repeat the name of the show 
in each half-hour cell. Kyle suggests that you use both the rowspan and colspan 
attributes to create a table cell that spans four rows and four columns. 


Tutorial 6 Working with Tables and Columns | HTML 5 and CSS Waihi eet) 


Other programs in the 8:00 to 10:00 time slots, such as Saturday Nite Jazz and The 
Indie Connection, also span four rows, but only one column. The last program aired 
before KPAF signs off is the World News Feed, which is played every night from 10:00 
to 10:30. You add these and the other late evening programs to the schedule table now. 


To enter the remaining programs: 


BD 1. Return to the dir_evenings.html file in your editor and, directly above the 
closing </table> tag, add the following table row for programs airing at 
8:00 p.m.: 


<> 

<th>8:00 PM</th> 

<td rowspan="4" colspan="4">The Classical Music 
Connection</td> 

<td>Old Time Radio</td> 

<td rowspan="4">Saturday Nite Jazz</td> 

<td rowspan="4">The Indie Connection</td> 
Pk oh ab 


D2. The Inner Mind is the only program starting at 8:30 p.m. during the week. 
Add the 8:30 p.m. starting time and the program listing as a new row in the 
schedule table: 


<tr> 
<th>8:30 PM</th> 
<td>The Inner Mind</td> 
</tr> 


BD 3. The only program that starts at 9:00 p.m. is the hour-long Open Mike Nite 
program. Add the following row to the table to display this program in the 
schedule: 


<tr> 

<th>9:00 PM</th> 

<td rowspan="2">Open Mike Nite</td> 
</tr> 


D 4. There are no programs that start at 9:30 p.m. during the week. However, you 
still need to include this starting time in the schedule because the nightly 
schedule is broken down into half-hour increments. Add the following table 
row: 


<tr> 
<th>9:30 PM</th> 
</tr> 


BD 5. Complete the table by adding the last row, which lists the World News Feed 
program that airs every night starting at 10:00 p.m.: 


<tr> 

<th>10:00 PM</th> 

<td colspan="7">World News Feed</td> 
</tr> 


Figure 6-18 highlights the newly added rows in the schedule table. 
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Figure 6-18 Adding the remaining DLR programs 


program covers 4 
half-hour slots on 4 t 


consecutive days tr 


the8:68 PM ti 
| | i t< “at "4">The Classical fusic Connection td 


t Old Time Radio</td 


programs cover 4 t y ="4">Saturday Nite Jazz</td 
half-hour slots td o ="4">The Indie Connection</t 
t 
tr 
t 8:30 F t 


only one program cists tones ts 
\_ Starts at 8:30 p.m. J a 
t ) PM +) 
program covers 2 , ; 
— qc = Open Nike Nite 
(half-hour slots f 
(no program starts ) - y= 38 F ‘ 
——e——E 
at 9:30 p.m. 
% us p t 
t 
( program airs every ) th>10:00 PM 
night starting at -—— ="7">World News Feed</td 
10:00 p.m. t 
\eaetege 4 


tab Le 


D 6. Save your changes to the file and then reload the dir_evenings.htm! file in 
your browser. 


Figure 6-19 shows the complete schedule for all of the DLR evening 
programs during the week. 


Figure 6-19} 6-19 The complete DLR evening schedule 


Time Man 


6:00 PM Nathonal News 


6:30 PM ‘World News 
7:00 PM 
7:30PM ‘ Peete : ee ie eee 


8:00 PM id Thine Radio 
8:30 PM The Inner Mind 

T Commectior sat 
2:00 PM 
9:30 PM 
10:00 PM World News 


The web table you created matches the printout of DLR’s evening schedule. Kyle 
likes the clear structure of the table. He notes that many DLR listeners tune into the 
station over the Internet, listening to DLR’s streaming audio feed. Because those 
listeners might be located in different time zones, Kyle suggests that you add a caption 
to the table indicating that all times in the schedule are based on the Central time zone. 


INSIGHT 
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Defining Borders in HTML 


If you work with legacy websites, you might encounter web tables in which tables are 
formatted using HTML attributes. One such attribute is the following border attribute 


<table border="value"> 


</table> 


where value is the width of the table border in pixels. Adding a table border in 
this fashion also adds a border around individual table cells. HTML also supports 
two attributes, frame and rules, that allow you to specify exactly which table 
cells receive borders and which sides of those table cells are bordered. 

These attributes are not supported in HTML 5, but most browsers still support 
them for older websites. You should use CSS border styles whenever possible to 
format the appearance of your web table. 


Creating a Table Caption 


Table captions are another part of the basic table structure and are marked using the 
following caption element 


<caption>content</caption> 


where content is the content contained within the caption. Captions can contain 
additional text-level elements. For example, the following code marks the text Program 
Schedule using the em element, which marks it as emphasized text: 


<caption><em>Program Schedule</em></caption> 


Only one caption is allowed per web table, and the caption element must be listed 
directly after the opening <table> tag. 
Add a caption to the program schedule. 


To add a table caption: 
BD 1. Return to the dir_evenings.html file in your editor. 
D 2. Directly after the opening <table> tag, insert the following caption element: 


<caption>All Times Central</caption> 


Figure 6-20 highlights the table caption element. 
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Figure 6-20 Adding a caption to a web table 


<table class="schedule"> 

<caption>ALl Times Central</caption> 

<tr> 
<th>Time</th> 
<th>Mon</th> 
<th>Tue</th> 
<th>Wed</th> 
<th>Thu</th> 
<th>Fri</th> 
<th>Sat</th> 
<th>Sun</th> 

</tr> 


BD 3. Save your changes to the file. 


By default, browsers place captions above the table, but you can specify the caption 
location using the caption-side property 


caption-side: position; 


where position is either top (the default) or bottom to place the caption below the 
table. 

To align the caption text horizontally, you use the CSS text-align property. Thus, 
to place the schedule caption in the bottom-right corner of the table, you would enter 
the following CSS styles: 


caption-side: bottom; 
text-align: right; 


REFERENCE 


Creating a Table Caption 


¢ To create a table caption, add the following caption element directly below the 
opening <table> tag 


<caption>content</caption> 


where content is the content of the table caption. 
¢ To position a table caption, apply the CSS property 


caption-side: position; 


where position is top or bottom. 
¢ To horizontally align a caption, apply the CSS text-align property 


text-align: position; 


where position is left, center, or right. 


Add styles to the dlir_tables.css style sheet to place the caption of the program 
schedule table to the bottom and right of the table. 
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To format the table caption: 
BD 1. Return to the dIr_tables.css file in your editor. 
BD 2. Go to the Table Caption Styles section and insert the following style rule: 


table.schedule caption { 
caption-side: bottom; 
text-align: right; 


} 


Figure 6-21 highlights the style rule for the table caption. 


Figure 6-21 Formatting a caption 


places the caption 
at the bottom of 
the table 


table.schedule caption { 
caption-side: bottom; 


text-align: right; right-aligns the 
} caption text 


D 3. Save your changes to the file and then reload the dir_evenings.htm! file in 
your browser. Figure 6-22 shows the placement of the table caption below 
and to the right of the schedule table. 


Figure 6-22 J 6-22 Placement of the table caption 


Time Mon Tue 
6:00 PM National News 
6:30 PM World News 
7:00 PM Word ay ag -Wi cok 


Opera Fest Rado U Sdence Week ‘The Living World 
7:30 PM train Rew Gienarck Forum 


8:00 PM Olid Time Radio 
8:30 PM The Inner Mind 
The Classical Music Connection Saturday Nie Jazz «The Inde Connection 
9:00 PM 
9:30 PM 


10:00 PM 


Coen Mike Ne 


table caption 


Table captions inherit the text styles associated with the table. For example, if you 
create a style for the table element that sets the font color to red, the caption text will 
also be displayed in a red font. 
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Q 
H__ ~Problem Solving: Make Your Tables Accessible 
—i 
=! It is a challenge to make web tables accessible to users who rely on screen readers 
SM to access online content. Screen readers read table content linearly by moving left- 
Oo to-right from the cells within each row and then down row-by-row through the table. 
ra To make the table content accessible, you must first structure the content so that it is 


easily interpreted even when read in a linear order. 

Many screen readers include the ability to announce the row and column headers 
associated with each data cell, so you should always identify your row and column 
headers using the th element. You can also use the following scope attribute to 
explicitly associate a header cell with a row or column 


<th scope="type">..</th> 


where type is either row, column, rowgroup (for a group of rows), or colgroup (for 
a group of columns). For example, the following code explicitly associates the header 
cell with the content of its table row 


<th scope="row">7:30 PM</th> 


A screen reader encountering the scope attribute can use it to aurally identify a 
data cell with its row and column headers, making it easier for users to interpret the 
cell content. 

Appendix D provides more information on making the web more accessible for 
users with special needs, including examples of other HTML attributes that can make 
your web tables more accessible. 


You have completed your work on setting up the program schedule in a web table. 
In the next session, you will refine the table structure by grouping the rows and columns 
of the table. You will also further explore CSS styles designed specifically for tables and 
table data. 
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" Session 6.1 Quick Check 


1. How is the number of columns in a table determined? 

a. By the cols attribute 

b. By the columns attribute 

c. By the maximum number of cells placed within the table rows 

d. By the maximum number of th elements within the table rows 
2. To mark a cell as a table header, use: 

a. td 

b. th 

c. thead 

d. theader 


3. To mark a cell as containing table data, use: 
a. td 
b. tdata 
c. cell 
d. celldata 


4. To display all table elements with collapsed borders, use: 
a. table-collapse: collapse; 
b. border: collapse; 
c. border: auto; 
d. border-collapse: collapse; 


5. Two table cells have adjacent borders. One cell has a 5-pixel-wide double 
border and the other cell has a 6-pixel-wide solid border. If the table borders 


are collapsed, what type of border will the two cells share? 
a. 6-pixel solid border 

b. 5-pixel solid border 

c. 5-pixel double border 

d. 6-pixel double border 


6. To span a cell across two rows and three columns, use the attribute: 


REVIEW 


a. span = "2 3" 

b. span = "3 2" 

c. rows = "2" cols = "3" 

d. rowspan = "2" colspan = "3" 


7. How do you keep table columns aligned when a cell spans multiple rows? 
a. Reduce the number of cells in the rows below the spanning cell 
b. Use the align attribute 
c. Use the rows="align" attribute 
d. Use the cols="align" attribute 


8. How do you keep table columns aligned when a cell spans multiple columns? 
a. Reduce the number of cells in the current row after the spanning cell 
b. Use the align attribute 
c. Use the rows="align" attribute 
d. Use the cols="align" attribute 
9. To display a table caption in the lower-corner of the table, use: 
a. caption: bottom left 
b. caption left bottom 
c. caption-side: bottom; text-align: left; 
d. caption: bottom; align: left; 
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Session 6.2 Visual Overview: 


The colgroup element 
identifies groups of 
columns in the web table. 


The thead element 
identifies the row(s) in the 
table header. 


The tbody element 
identifies the row(s) in the 
table body. 


The tfoot element 
identifies the row(s) in the 
table footer. 


<table class= 


</table> 


schedule"> 
<caption>ALl Times Central</caption> 
<colgroup> 
<col id="firstCol” /> 
<col class="dayCols" span="5" /> 
</colgroup> 
<thead> 
<tr> 
<th>Time</th> 
<th>Mon</th> 
th>Tue</th> 
<thoWed</th> 
<th>Thu</th> 
<thoFri</th> 
</tr> 
<«/thead> 
<tbody> 
<tr> 
<tho6:06 PH</th> 
<td colspan="5">National News</td> 
</tr> 
<tr> 
<th>6:30 PM</th> 
<td colspan="5">World News</td> 
</tr> 
<tr> 
<th>7:66 PM</th> 
<td rowspan="2">0pera Fest</td> 
<td rowspan="2">Radio U</td> 
<td rowspan="2">Science Week</td> 
<td rowspan="2">The Living world</td> 
<td>Word Play</td> 
</tr> 
<tr> 
<tho7:36 PM</th> 
<td>Brain Stew</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 


</tr> 
</ttoot> 


Individual columns are 
identified with the 
col element. 


<td colspan="6">DLR ends its broadcast day at 10:30 p.m.</td> 
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Rows and Column Groups 


The firstCol 
column lists 
the times. 


The dayCols 
columns list the 
days of the week. 


The table 
header consists 
of six columns. 


National News 


World News 


Opera Fest Radio U Science Week 


The Living World Word Play 


All Times Central 


DLR ends its broadcast day at 10:30 p.m. 


The table footer 
text is left-aligned. 


The table body includes 
rows and columns, some 
of which span multiple 

columns or multiple rows. 


This style rule sets the 
background and text 
color of the table header. 


table.schedule thead { 
background: rgb(153, 0, 153); color: white; 


} 
; This style rule sets the 
table.schedule tfoot { background and text 
background: black; color: white; color of the table footer. 
} 


This style rule sets the 
table.schedule thead tr fheight: 30px;} height of rows in the 5 


table header. 


table.schedule tbody tr f{height: 40px;} 
: This style rule sets the 
part na > height of rows in the 
col#firstcol { table body. 
background: rgb(218, 210, 218); width: 20%; 
} This style rule defines the 
: : background color and 
col.dayCols f{ width of the first table 
background: rgb(255, 220, 255); width: 16%; column. 


} 


This style rule defines the 
background color and 
width of the remaining 


table columns. 
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Creating Row Groups 


The table you created in the first session made no distinction between rows that 

you used to contain column headers and rows that contained table data. To add this 
information into the structure of the table you can create row groups in which each 
row group contains specific table information. HTML supports three row groups, which 
define rows that belong to the table head, table body, or table footer and which are 
marked using the thead, tbody, and tfoot elements. A web table that is divided into 
row groups has the following general structure: 


<table> 
<thead> 
table rows 
</thead> 
<tbody> 
table rows 
</tbody> 
<tfoot> 
table rows 
</tfoot> 
</table> 


where table rows are rows from the table. For example, the following code marks 
two rows as belonging to the table head: 


<theads> 
<tr> 
<th colspan="2">DLR Programs</th> 
</tr> 
<tr> 
<th>Time</th> 
<th>Program</th> 
</tr> 
</thead> 


Order is important. The thead element must appear first, followed by the tbody 
ee ere element, and finally the t£oot element (if it exists). A table can contain only one thead 
sae eee er element and one tfoot element, but it can include any number of tbody elements to 
change the appearance mark row groups that contain several topical sections. 
of the table rows, instead, 
they are used to indicate 
the structure of the table 
itself. 
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Marking Row Groups 
¢ To mark row groups in the table head, use 


<thead> 
table rows 
</theads> 


REFERENCE 


where table rows are the rows in the table head. 
¢ To mark row groups in the table body, use 


<tbody> 
table rows 
</tbody> 


where table rows are the rows in the table body. 
¢ To mark row groups in the table footer, use 


ZCECOLS 
table rows 
</tfoots 


where table rows are the rows in the table footer. 


To indicate the structure of the schedule table, you decide to use the thead element 
to mark the head row in the program schedule, the tbody element to mark the rows for 
the broadcast times of each program, and the tfoot element to add a table footer. 


To create table row groups: 


dD 1. If you took a break after the last session, make sure the dlr_evenings.html 
file is open in your editor. 


D 2. Enclose the first table row within an opening and closing set of <thead> tags 
to mark that row as the table header. Indent the HTML code for the row to 
make it easier to read. 


BD 3. Enclose the remaining table rows within an opening and closing set of 
<tbody> tags to mark those rows as belonging to the table body. Indent the 
HTML code for those rows to make them easier to read. 


Figure 6-23 highlights the newly added code in the schedule table. 
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Figure 6-23 Marking row groups 


class="s« 
ALL Times Central 


hedule" 


table 
caption 


<thead> 


<tr 


fcaption 


<th>Time</th 
<thoMon</th 
<th> Tue</th> 
The thead element p 
thoWed</th> 
marks the row group Sins inte peti 
for the table header “i 
<thoFri</th 
th>Sat th 
<th>Sun</th> 
<j/tr 
</thead> 


<the6:00 PM</th 


colspan="7">National News</td 


The tbody element 
marks the row group 
for the table body 


10:00 PM</th 


td colspan="7">World News Feed</td 
tr 

/tbody> 

tfoot> 
The tfoot element tr 
marks the row group td colspan="8">DLR ends its broadcast day 
for the table footer tr> 

/tfoot> 


<j table 


at 16:36 p.m.</td 


BD 5. Save your changes to the file. 


One purpose of row groups is to allow you to create different styles for groups of 


, rows in your table. Any style that you apply to the thead, tbody, or tfoot element is 


Row groups also are 

used for applications 

in which table body 
content is imported from 
external data sources, 
such as databases or XML 
documents. 


inherited by the rows those elements contain. 


To format the table row groups: 
BD 1. Return to the dir_tables.css file in your editor. 


Kyle wants the rows within the table header to be displayed in a white font on a 
purple background. He wants the rows within the table footer to be displayed in a 
white font on a black background. Add these style rules to the dlr_tables.css file now. 


BD 2. Go to the Row Group Styles section and add the following style rule to 


format the content of the table header row group: 


table.schedule thead { 
rgbiGls3i, 
white; 


background: @), als) p 


color: 
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BD 3. Add the following style rule for the table footer row group: 


table.schedule tfoot { 
background: black; 
color: white; 


} 


Figure 6-24 highlights the newly added style rules. 


Figure 6-24 Formatting row groups 


displays the rows from table.schedule thead { 

the table header row background: rgb(153, @, 153); 
group in a white font on color: white; 

a purple background J) } 


displays the rows from | table. schedule tfoot { 
the table footer row background: black; 
group in a white font color: white; 


on a black background 


} 


BD 4. Save your changes to the style sheet and then reopen the dir_evenings.html 
file in your browser. Figure 6-25 shows the new appearance of the web table 
with the formatted row groups. 


Figure 6-25 Row groups in the schedule table 


table header 


6:00 PM National News 

6:30 PM World News 

7:00 PM Word Play Age Week 
Opera Fest Rado U Science Week The Living World 
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Next, Kyle wants to format the appearance of some of the columns in the table. You 
can define the appearance of a table column through the use of column groups. 
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The span attribute can also 
be added to the colgroup 
element to create column 
groups that span multiple 
columns. 


Creating Column Groups 


There is no HTML tag to mark table columns—the columns are determined implicitly 
based on the number of cells within the table rows. However, you can still reference 
those columns for the purposes of creating design styles through the following 
colgroup element 


<table> 
<colgroup> 
columns 
</colgroup> 
table rows 

</table> 


where columns are the individual columns defined within the group and table rows 
are the table rows. The columns within the colgroup element are identified by the 
following col element: 


<col span="value" /> 


where value is the number of columns spanned by the col element. If no span 
attribute is included, the col element references a single column. Thus, the following 
column structure defines a group of three columns with the first two columns grouped 
together: 


<colgroup> 
<col span="2" /> 
<col /> 
</colgroup> 


Once you have defined your columns using the colgroup and col elements, you 
can identify individual columns using id and/or class attributes for the purposes of 
applying CSS styles to specific columns. For example, the following code defines a 
column group consisting of three columns, with the first two columns belonging to the 
firstCols class and the third column belonging has the ID lastCol. 


<colgroup> 
<col span="2" class="firstCols" /> 
<col id="lastCol" /> 

</colgroup> 


REFERENCE 


Identifying a Column Group 
° To identify a group of columns from the web table, use 


<colgroup> 
columns 
</colgroup> 


where columns are the individual columns defined within the group. 
¢ To identify a column within a column group, use 


<col span="value" /> 


where value is the number of columns spanned by the col element. 


Create a column group for the program schedule table with one col element used 
for the first column containing the list of broadcast times and the second col element 
used for the remaining seven columns containing the names of the DLR programs. 
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To define a column group: 
BD 1. Return to the dlr_evenings.html file in your editor. 


DD 2. Directly after the table caption, insert the following code to create a column 
group consisting of a first column with the ID firstCol followed by seven 
columns belonging to the dayCols class. 


<colgroup> 

<col id="firstCol" /> 

<col class="dayCols" span="7" /> 
</colgroup> 


Figure 6-26 highlights the newly added style rules. 


Figure 6-26 Defining a column group 
> 
col element <table class="schedule"> 
references the <caption>ALL Times Central</caption> 
first column <colgroup> 


<col id="firstCol" /> 

col class="dayCols" span="7" /> 
</colgroup> 

<thead> 


col element 
references the 
next seven 

columns 


BD 3. Save your changes to the file. 


Once the column groups have been defined, you can create styles to format the 
appearance of the columns. The following style rule uses the class and id values 
defined in the previous example to set the background color of the column with the ID 
firstCol to red and the columns belonging to the dayCols class to yellow. 


col#firstCol {background-color: red;} 
col.dayCols {background-color: yellow; } 


Note that columns and column groups accept only CSS style properties to modify 
the column borders, background, width, and visibility. Other styles are not supported. 
You cannot, for example, set the font size for all of the text within a particular column 
or column group. 

Modify the dlr_tables.css style sheet to change the background color of the first 
column to gray and the background of the remaining columns (belonging to the 
dayCols class) to pink. 


To format a column group: 
BD 1. Return to the dir_tables.css file in your editor. 
BD 2. Go to the Column Group Styles section and insert the following style rules to 
format the appearance of the schedule table columns: 


col#firstCol { 
background: rgb(218, 210, 218); 


} 


col.dayCols { 
background: rgb(255, 220, 255); 


} 
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Figure 6-27 highlights the style rules for the two column groups. 


Figure 6-27 Formatting the table columns 
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BD 3. Save your changes to the file and then reload the dlr_evenings.html file in 
your browser. 


Figure 6-28 shows the appearance of the formatted columns. 


Figure 6-28 Column groups in the schedule table 


firstCol column dayCols columns 


6:00 PM National News 
6:30 PM World News 
7:00 PM Word Play Agn. Week 
Opera Fest Radia Sdence Week The Living World = Folk Fest 
7:30 PM Brain Stew Siemarck Forum 
3.00 PM Old Time Radio 


8:30 PM The Inner Mind 
The Classical Music Connection Saturday Wie Jazz «The Indie Connection 


9:00 PM 
Open Mike Mite 
9:30 PM 


10:00 PM Wrorkd News Feed 


Al Times Central 


You may have noticed that the new background colors have not been applied to all 
columns of the schedule table. The columns in the table header, for example, are still 
displayed on a medium purple background. To understand why, you need to explore 
how CSS handles style precedence for different parts of the table structure. 
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Creating Banded Rows and Columns 


A popular table design is to create table rows of alternating background colors to 
make it easier for users to locate table data. You can create banded rows using the 
nth-of-type pseudo-class. For example, to create a table in which the background 
colors alternate between yellow on the odd-numbered rows and gray on the even- 
numbered rows, apply the following style rules: 


INSIGHT 


tr:nth-of-type(odd) { 
background: yellow; 


} 


tr:nth-of-type(even) { 
background: gray; 


} 


The same technique can be used to create banded columns of different 
background colors. The following style rules create odd-numbered columns that 
have a yellow background and even-numbered columns with a gray background: 


colgroup col:nth-of-type(odd) { 
background: yellow; 


} 


colgroup col:nth-of-type(even) { 
background: gray; 


} 


Note that this technique assumes that none of the table row or col elements 
span more than one row or column. 


Exploring CSS Styles and Web Tables 


Table objects have different levels of precedence with styles for more specific table 
objects taking precedence over styles for less specific objects. Figure 6-29 diagrams the 
different levels of precedence in the table structure. 


Figure 6-29 Levels of precedence in the table styles 
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The style rules with the highest precedence are those applied to individual table 
cells. Next are the style rules applied to table rows and table row groups, followed by 
the style rules applied to columns and column groups. Finally, the style rules applied to 
the entire web table are the ones with the lowest precedence. 

The order of precedence explains why the cells in the table header retained their 
medium purple background. That background color was defined in the style rule for the 
table header row group and thus took precedence over any background styles defined 
for a column or column group. 


Working with Width and Height 


By default, browsers will attempt to fit the most content possible within each column 
before wrapping the cell text to a new line. The result is that columns containing cells 
with more text are wider than those with less text. If the width of the entire table is set 
to be larger than the width required for individual columns, the extra space is divided 
equally among the columns. You can set the column widths to a different value by 
applying the width property to columns or column groups. 

Kyle suggests you set the width of the first column to 16% of the width of the entire 
table and the widths of the remaining seven columns to 12% each, resulting in a total 
width of 100% divided among the eight columns. Add these styles to the style rules for 
the schedule table columns. 


To set the width of a column: 


D 1. Return to the dIr_tables.css file in your editor and go to the Column Group 
Styles section. 


BD 2. Add the style width: 16%; to the style rule for the firstCol column. 


BD 3. Add the style width: 12%; to the style rule for the columns of the dayCols 
class. 


Figure 6-30 highlights the width styles for the two column selectors. 


Figure 6-30 Setting the column width 
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Next, you explore how to work with row heights. 


u- 
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Creating Narrow Tables 


As the width of a table decreases, the amount of space allotted to each column 
decreases proportionally. However, the column widths can be decreased only so far. 
Because browsers do not hyphenate words by default, the minimum column width is 
equal to the width of the longest word within the column. To allow the column widths 
to decrease below this limit, you can apply the following style rule to the table 
element: 


INSIGHT 


table {table-layout: fixed; } 


A table-layout value of fixed tells the browser to ignore cell content when 
reducing the width of the table columns. As the column width decreases, eventually 
the cell text will extend beyond the borders of the cell. To prevent this from 
happening, you can force the browser to insert line breaks within the individual words 
in your table cells by applying the following style rule: 


th, td {word-wrap: break-word; } 


By setting the table-layout property to fixed and allowing line breaks within words 
in the cell, your column widths can be reduced below the default limits set by the 
browser. 


The height of each table row is based on the height of the tallest cell within the row. 
ate Because the cell height itself will increase as necessary to enclose its content, the result 
If the row height is not set ill b haiahte th if h fr fi 
largerenoucih to-contain will be row heights that are not uniform across t e tab e. You can define a uniform row 
the cell content, the height + height by applying the height style to table rows within each row group. Kyle suggest 
will automatically increase that you set the height of the table header row to 30 pixels and the height of each row 


to accommodate the in the table body to 40 pixels. 
overflow content. 


To set the height of the table rows: 
D 1. In the dir_tables.css file, scroll up to the Row Group Styles section. 


BD 2. Add the following style rule to set the row height within the table header to 
30 pixels: 


table.schedule thead tr { 
height: 30px; 


} 


BD 3. Add the following style rule to set the row height in the table body to 
40 pixels: 


table.schedule tbody tr { 
height: 40px; 


} 


Note that you don’t apply the height property to the row groups themselves 
because that would set the height of the entire group and not the individual 
rows within the group. 


Figure 6-31 highlights the height styles for the table rows. 
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black; 
: whites 


table.schedule thead tr { 
height: 30px; 


table.schedule tbody tr { 


height: 49px; 


sets the height of the 
row in the table 
header to 30 pixels 


sets the height of the 
rows in the table body 
to 40 pixels 


BD 4. Save your changes to the file and then refresh the dlr_evenings.html file in 
your browser. 


Figure 6-32 shows the revised appearance of the table with the resized 
columns and rows. 


Figure 6-32 Schedule table with resized columns and rows 
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With the increased row height, Kyle would like all of the program names in the 
schedule to be vertically aligned with the tops of the cell borders. You can move the 
cell text using the vertical-align property introduced in Tutorial 2. Kyle also wants 
to increase the padding within each cell to add more space between the program 
names and the cell borders. 
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To set the padding and cell alignment: 


BD 1. Return to the dIr_tables.css file in your editor and go to the Table Cell Styles 
section. 


BD 2. Add the following styles to the style rule for the header and data cells in the 
schedule table: 


padding: 5px; 
vertical-align: top; 


Figure 6-33 highlights the new styles in the style sheet. 


Figure 6-33 Formatting the table cells 
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D 3. Close the file, saving your changes. 
BD 4. Reload the dir_evenings.html file in your browser. 


Figure 6-34 shows the completed design of the nightly schedule page. 
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You have completed work on DLR’s nightly schedule page. However, you will 
continue to explore other issues that surround the use of web tables and table designs 
in the remainder of this session. 


Applying Table Styles to Other Page Elements 


Tables are useful for displaying information in an organized structure of rows and 
columns, but you are not limited to applying a table design only to web tables. Using 
the CSS display property, you can apply a table layout to other HTML elements, such 
as paragraphs, block quotes, or lists. Figure 6-35 lists different CSS display styles and 
their equivalent HTML elements. 


Figure 6-35 Table display styles 


Display Style Equivalent HTML Element 
display: table; table (treated as a block-level element) 
display: table-inline; table (treated as an inline element) 
display: table-row; tr 

display: table-row-group; tbody 

display: table-header-group; thead 

display: table-footer-group; tfoot 

display: table-column; co 

display: table-column-group; colgroup 

display: table-cell; td or th 

display: table-caption; caption 


For example, the following definition list contains definitions of two networking 
terms: 


<dl> 
<dt>bandwidth</dt> 
<dd>A measure of data transfer speed over a network</dd> 
<dt>HTTP</dt>s 
<dd>The protocol used to communicate with web servers</dd> 
</dl> 


Rather than accepting the default browser layout for this list, it might be useful to 
display the text in a table. However, you don’t want to lose the meaning of the markup 
tags. After all, HTML is designed to mark content, but not indicate how browsers 
should render that content. To display this definition list as a table, you could enclose 
each set of terms and definitions within a div element as follows: 


<dl> 
<div> 
<dt>bandwidth</dt> 
<dd>A measure of data transfer speed over a network</dd> 
</div> 
<div> 
<dt>HTTP</dt> 
<dd>The protocol used to communicate with web servers</dd> 
</div> 
</dl> 
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You could then apply the following style sheet to the list, treating the entire 
definition list as a table—the div elements act as table rows, and the definition terms 
and descriptions act as table cells within those rows: 


dl {display: table; border-collapse: collapse; width: 300px; } 

dl div {display: table-row; } 

dt, dd {display: table-cell; border: lpx solid black; 
vertical-align: top; padding: 5px;} 


As Figure 6-36 shows, when viewed in a web browser, the definition list looks 
exactly as if it were created using HTML table elements. 


Figure 6-36 Applying table styles to a definition list 


dl 
div> 

edt>bandwidth</dt 

<dd>A measure of data transfer speed over 
a network«/dd 


</div 
div 
dteHTTP</dt 
dd>The protocol used to communicate with 
web servers</dd 
di 


dl 


definition list code 


bandwidth | A measure of data transfer speed 
over a network 


HTTP The protocol used to 
communicate with web servers 


definition list displayed as table 


dl { 
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di div { 
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dt, dd { 
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table styles 


In the same way, you can display other page elements in table form, as long as the 
markup tags are nested in a way that mimics a table structure. 
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Formatting a Table using HTML Attributes 


If you work with legacy web pages, you might encounter web tables that use attributes 
to style the appearance of the table. For example, the width of the table can be set 
using the following width attribute 


- 
pe 
© 
a 
2) 
2 
a 


<table width="value"> .. </table> 


where value is the width of the table in pixels or as a percent of the width of the 
parent element. 
The height of table rows can be set using the following height attribute 


Kine levsnkeinc=yeulwiets — a//iees 


where value is the table row height in pixels. 
The padding space within each table cell is set using the following cellpadding 
attribute 


<table cellpadding="value"> .. </table> 


where value is the size of the padding space in pixels. 
Finally, the space between table cells is set using the following cellspacing 
attribute 


<table cellspacing="Vvalue"> .. </table> 


where value is the size of the space in pixels. The cellspacing attribute essentially 
sets the width of the borders around individual table cells. 

Each of these attributes has been replaced by CSS styles; however, you may still see 
them employed in older websites and if you are tasked with upgrading those sites you 
will need to understand those attribute's meaning and purpose. 


Tables and Responsive Design 


Tables do not scale well to mobile devices. Users will often be confronted with one 
of the following: (a) a table in which the cell content is too small to be readable, (b) a 
table that extends beyond the boundaries of the visual viewport, or (c) table columns 
that are so narrow that the cell content is unreadable (see Figure 6-37). 
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Figure 6-37 Web tables on mobile devices 
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What is often required is a new layout of the table data for mobile screens in which 
several table columns are reduced to two: one column containing all of the data labels 
and a second column containing the data associated with each label. Figure 6-38 
shows an example of a mobile layout for the same table data shown in Figure 6-37. 


Figure 6-38 Two-column layout for a mobile device 
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There are several scripts and frameworks available on the web to design a table for 
use with mobile devices or you can use CSS to restructure the web table, which is based 
on an idea suggested by Chris Coyier at https://css-tricks.com/responsive-data-tables/. 

The first step in creating a responsive web table that relies only on CSS is to add the 
text of data labels as attributes of all of the td elements in the table body. You can store 
these data labels using a data attribute, which is an attribute introduced in HTML 5 
that stores customized data. The general format of a data attribute is 


data-text="value" 


where text is the name of the data attribute and value is its value. Data attributes are 
often used for database applications that read the contents of HTML files. There are 
no standard names for data attributes, instead those names are specified by whatever 
application happens to be reading the HTML content. 

For example, the following table uses a data attribute named data-label to store 
the text of the labels associated with each data cell. 


<tr> 
<td data-label="Date">April 2, 2021</td> 
<td data-label="Program Title">Memories and Music</td> 
<td data-label="Featuring">Kelsey MacGraw, Mandy Dee, 
Young Irish 
</td> 
<td data-label="Venue">Folk City, Boise ID</td> 
<td data-label="Description">It’s all about new music this 
week on Folk Fest. Scott Dirkens will preview new releases 
from Kelsey MacGraw and Mandy Dee. And then join us for 
a set from the always-popular group, Young Irish, from 
their recent tour. 
</td> 
</tr> 


Once you have assigned data labels to each td element, you need to change 
the table layout so that each table object is rendered as a block element. Because 
a responsive table design doesn’t use a table header or footer, you hide those table 
features. Thus, within a media query for mobile devices, you establish the following 
style rules: 


table, tbody, tr, td, th { 
display: block; 


} 


thead, tfoot { 
display: none; 


} 


Each data cell in the table body then needs to be placed using relative positioning 
with a large left padding space into which you insert the text of the data label. The 
following style rule creates a padding space that is 40% of the width of the data cell. 


tbody td { 
position: relative; 
padding-left: 40%; 


} 


Finally, you need to insert the content of the data-label attribute directly before 
the data cell value. To accomplish that, you use the before pseudo-element along 
with the content property. The data label will be placed using absolute positioning 
at the top-left corner of the block. You can include some padding to offset the column 
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heading from edges of the block. The width should be equal to the left padding space 
you set in the style rule for the td element. A basic style rule would appear as 


td::before { 
content: attr(data-label); 
position: absolute; 
top: Opx; 
left: Opx; 
padding: 5px; 
width: 40%; 


} 


As shown earlier in Figure 6-38, the result is a list of data cells that are aligned as 
block elements and then, within each block element, the data label is followed by the 
data cell content. Note that the text of this web table is easier to read in the smaller 
viewport of the mobile device. 

You can supplement these style rules with other styles to create a more pleasing 
design, but the goal is the same: to transform a table with multiple columns into a 
simpler two-column layout. Note that this approach doesn’t work for more complex 
table layouts with cells spanning multiple rows and/or columns. 


= Written Communication: Designing Effective Web Tables 


PROSKILLS 


The primary purpose of a web table is to convey data in a compact and easily- 
interpreted way. You can apply several design principles to your web tables to make 
them more effective at presenting data to interested readers: 


° Contrast the data cells from the header cells. Make it easy for readers to understand 
your data by highlighting the header column or row in a different color or font size. 

e Avoid spanning rows and columns unless necessary. Usability studies have shown 
that information can be gleaned quickly when presented in a simple grid layout; 
don’t break the grid by unnecessarily spanning a cell across rows and columns. 

¢ Break the monotony with icons. lf you are repeating the same phrase or word within 
a single row or column, consider replacing the text with an icon that conveys the 
same message. For example, in a table that describes the features of a product, use 
a check mark to indicate whether a particular feature is supported, rather than text. 

e Alternate the row colors. A large table with dozens of rows can be difficult for 
readers to scan and interpret. Consider using alternative background colors for the 
table rows to break the monotony and reduce eye strain. 

e Don’t overwhelm the eye with borders. Cell borders should be used only when they 
aid users by separating one cell from another. If they're not needed for this purpose, 
they actually can distract from the data. Rather than using borders, apply ample 
spacing to your cells to differentiate the table’s rows and columns. 

¢ Keep it brief. A table should not extend beyond what will fit compactly within 
the user's browser window. If your table is too extensive, consider breaking it into 
several tables that focus on different areas of information. 


A web table is judged primarily by its readability. This can best be accomplished by 
using a simple design whose features convey relevant information to readers, giving 
them the data they want as quickly as possible and making it easy to compare one 
value with another. 
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Designing a Column Layout 


Tables are not the only way to add data columns to your web page. Starting with CSS, 
web page designers were given the ability to create column layouts in which content is 
displayed side-by-side in the page. Column layouts differ from layouts that use floating 
elements or flexboxes in that content from a single element can flow from one column 
to the next in the same way that article text flows from one column to the next in a 
newspaper layout. If the page is resized, the flow of the content adjusts to match the 
new page width, retaining the column layout. 


Setting the Number of Columns 
The size of a column layout is established using the following column-count property 
column-count: value; 


where value is the number of columns in the layout. For example, the following style 
rule will lay out the content of the article element in three columns: 


article { 
column-count: 3; 


} 


If you need to ensure compatibility with older browsers, you can include the 
following browser extensions in the style rule: 


article { 
-moz-column-count: 3; 
-webkit-column-count: 3; 
column-count: 3; 


} 


For each program aired by DLR, Kyle has created a page describing an upcoming 
episode. Kyle wants to apply a column layout to these pages. One of the pages that 
Kyle has created provides details of an upcoming episode of The Living World. Open 
that page now to view its current content and design. 


To view the episode page: 


D 1. Use your editor to open the dir_lw0414_txt.html file from the html06 > 
tutorial folder. Enter your name and the date in the comment section of the 
file and save it as dlr_lw0414.html. 


BD 2. Take some time to study the content and structure of the document. 


D 3. Use your browser to open the dir_lw0414.html file. Figure 6-39 shows the 
current layout of the page article on a desktop device. 
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Figure 6-39 Current layout of the driverless car article 
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GPS, proxknity seniors, and computer image enhancement. This formation ts fed into a control epstern that uses it to plot navigation paths and to reapond to 
obutactes and road directions A deiverless car is capable of updating its status based on changing conditions Driverless cars should be autonomous even when 
entering uncharted regions. 


In the United States, the National Highway Traffic Safety Administration (NHTSA) has proposed the following levels of autonomy for motorized vehicles: 


Level o The driver completely controls the vehicle at all times. 
Level 1 Individual vehicle controls are sutornated, such as electronic stability control ot eutomatic braking 
Level 2 At least two controls can be autornated in unison, such as adaptive cruise control in combination with lane keeping, 


Level 5 The driver can fully cede control of all safety-critical functions in certain conditions The car senses when conditions require the driver to retake control 
aad ponadech “sufficiently comfortable transition time” for the driver to do x0. 

Level 4 The vehicle performs all safety-critical functions for the entire trip, with the driver not expected to control the vehicle at any time. Because this vehicle 
would contr! all functions from start to stop, including all parking functions, it could include unoccupied cars. 


Currently, we are at Level 2 with many vehicles able to provide automated aafety systems. such as automatic braking in reeponse to input from collision sensors. 


When Does Full Autonomy Arrive? 


Level 4 autonomous wehicles are arriving and they're arriving quickly. The obstacles to adoption of 4 driveriess economy are legal and technical. The United States 
traffic code does not peohibit autonomous vehicles, but it alvo does not specifically address them. Several states, incloding Nevada, Florida. California, and Michigan. 
have enacted maffic rules specifically tailored co driverless cars and mosy states are in the processing of enacting such legiclation. 


Que area of legal entanglement is the Laws against dietracted driving. Google epecifically requested an exemption to permit occupants to send text mestages while 
sitting behind the wheel of an autonomous vehicle. Other similar regulations will need to be addressed as driveriexs cars move from the testing stage into general use. 


Other countries have permitted the vesting of autonomous vehicles on public roads The United Kingdom enacted a testing phase in 2033, followed shorthy by France in 
204, 
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long lines of text 
are difficult to read 


Kyle is concerned that the article is difficult to read due to the long lines of text. 
In general, the optimal line of text should have about 60 characters or 12 words. 
However, the article on driverless cars averages about 140 characters and 24 words per 
line. He suggests you make the page a bit easier to read on desktop devices by splitting 
the article into two columns. 


To apply a column layout: 


BD 1. Use your editor to open the dIr_columns_txt.css file from the html06 » 
tutorial folder. Enter your name and the date in the comment section of the 
file and save it as dlr_columns.css. 


BD 2. Within the Column Styles section, insert the following media query to create 
column layout for the article element for devices with a minimum screen 
width of 641 pixels. 


@media only screen and (min-width: 641px) { 
article { 
column-count: 2; 


i 


Figure 6-40 highlights the media query in the style sheet. 
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Figure 6-40 Applying a 2-column layout to the article element 


/* Column 


Styles */ 
applies the column style 
only to screen devices 


wider than 640 pixels 


@media only screen and 
article { 7 
_  column-count: 25- 
} ; y 


) 


(min-width: 641px) { 


displays the 
article content 
across 2 columns 


. Save your changes to the file. 


. Close the file, saving your changes. 


column layout of the page article. 


3 
4. Return to the dlr_lw0414.html file in your editor. 

5. Within the document head, add a link to the dlr_columns.css style sheet. 
6 

7 


. Reload the dlr_lw0414.html file in your browser. Figure 6-41 shows the two- 


Figure 6-41 Article displayed across two columns 


The Living World 


April 14 


Join host Tim Un, 
atherwise known 


Rise of the Driverless Car and 
How It Will Impact You 


pin uaspaymanbbann. wen rhnign iesrosn aire betnaeeot re 
Driverless cars of autonomous vehicles esudytsc alae a 
radaz, GPS, proximity sensors, and computer image enhancement. Thi 

Saiecusitioe b Ged toa cobavel peice Cast usce vba chat acsigsion pith oad te 
teepond to obstacles and road directions A driverless car is capable of updating its 
status bared on changing conditions. Driveriess cars should be autonomous even 
when entering uncharted regions. 


In the United States, the National Highway Traffic Safety Administration (NHTSA) 
has proposed the following levels of autonomy for motorized vehicles: 
Level o The driver completely controls the vehicle at all times. 


Level 1 Individual vehick controls are automated, such as electronic 
stability control or automatic braking. 

Level a At least two controls can be automated in unison, such as adaptive 
cruise control in combination with lane keeping. 


Level 3 The driver can fully cede control of all safety-critical functions in 
certain conditions. The car centes when conditions require the driver to 


retake control and provides a “sulficiently comfortable transition time” for 
the driver to do so. 
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ove. 


pean aly her area aac 


two-column layout 


Experts predict that autonomous vehicles will gradually be introduced into the 


yehich to-vehicle (V2V) Estar pied teers mae 40 = 


2038 Tesla Motors Ce me gaa 
Sakina tie isos cad A aaleses Phan the Gomaahey Sr eaaacieg aoe 
vehick will depend on the economic and legal climate. 


2030 GM, Mereedes-Benz, Audi. Nissan, BMW, Renault, Tesla, and Google 
all expect to sell vehicles that can drive themsetves at least part of the time 


2024 laguar expects to release an autonomous cat. 
2035 Daimler and Ford expect to release autonornous vehicles on the 
market. 


2035 IHS Automotive report seys will be the year most self-driving vehicles 
will be operated completely independently from a human occupants 
control. 

a0go Experts at the Institute of Electrical and Electronics Engineers (IEEE) 
estimate that up to 73% of all vehicles will be autonamoas. 


Cleashy. the introduction and widespread adoption of autonomous vehicles will 
repercussions. 


have enormous 


By splitting the page article across two columns, you have made the text easier 
to read. 


Defining Columns Widths and Gaps 


By default, columns are laid out evenly across the width of the parent element. Thus, 
with a 2-column layout, each column will occupy approximately half of the parent 
element width. Another way to define your column layout is to explicitly set the width 
of the columns and then allow the number of columns to be determined by what can 
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fit within the allotted space. To set the column width, use the following column-width 
property 

column-width: size; 
where size is the minimum width of the column in one of the CSS units of measure. 


For example, the following style rule creates a column layout in which each column is 
at least 250-pixels wide: 


article { 
column-width: 250px; 


} 


| Column widths act like the basis value for items in a flexbox. The width is the initial 


For responsive design, size of each column, which will expand to match the available space. For example, if 
set the column widths the parent element has a width of 500 pixels, this style rule will result in a 2-column 
rather than the number layout. If the width is 750 pixels, the result is a 3-column layout. Between 500 and 750 


of columns to allow the 
column layout to match the 
width of the device. 


pixels, the article will be laid out in 2-columns with increasing widths assigned to each 
column to fill up the parent element. 

The column-width and column-count properties can be combined into the 
following shorthand columns property 


columns: width count; 


where width is the minimum width of each column and count is the maximum 
number of columns that will be fit into the allotted space. The following style rule 
creates a layout of 3 columns with a minimum width of 250 pixels each: 


article { 
columns: 250px 3; 


} 


If the allotted space is larger than 750 pixels, the columns will increase in width to fill 
up the space. If the space is smaller than 750 pixels, the column count will decrease to 2. 

These calculations assume that there is no space between the columns. However, by 
default browsers will create a gap of 1em between each column. To set a different gap 
size, apply the following column-gap property 


column-gap: size; 
where size is the width of the gap in one of the CSS units of measure. The following 


style rule creates a column layout in which each column is 250 pixels wide and the 
gap between the columns is 20 pixels: 


article { 
column-gap: 20px; 
column-width: 250px; 


} 


Thus, to fit two columns under this style rule, the parent element must be at least 
520-pixels wide. To fit three columns, the parent element must be at least 790-pixels 
wide (because there are two gaps of 20 pixels within the three columns), and so forth. 

Kyle suggests you increase the width of the gap between the columns in his page to 
30 pixels. 


To set the column gap size: 
BD 1. Return to the dir_columns.css file in your editor. 
D 2. Within the style rule for the article element, add the following style: 


column-gap: 30px; 


Figure 6-42 highlights the new code in the style rule. 
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Figure 6-42 Setting the size of the column gap 


@media only screen and (min-width: 641px) { 
article { 

column-count: 23 

column-gap: 30px; 


sets the size of the gap 
between the columns to 
30 pixels 


BD 3. Save your changes to the file and then reload dlr_lw0414.html in your 
browser. Verify that the gap between the two columns has increased from its 
default gap size. 


Another way to separate one column from the next is with a graphic dividing line, 
created using the following column-rule property 


column-rule: border; 


where border defines the style of the dividing line using the same CSS syntax 
employed to create borders around page elements. For example, the following style 
adds a 1-pixel solid red dividing line between the columns in a column layout: 


column-rule: 1px solid red; 


Like the border property you can break the column-rule property into the 
individual properties column-rule-width, column-rule-style, and column-rule 
color to set the dividing line’s width, style, and color. 

Kyle suggests that you add a 2-pixel solid gray dividing line to the column layout. 


To create a column rule: 


D 1. Return to the dir_columns.css file in your editor and within the style rule for 
the article element add the following style: 


column-rule: 2px solid gray; 


Figure 6-43 highlights the code to create the gray dividing line between the 
columns. 


Figure 6-43 Add a dividing line to the columns 


@media only screen and (min-width: 641ipx) { 
article { 
column-count: 2; 
adds a 2-pixel solid column-gap: 30px; 
gray dividing line column-rule: 2px solid gray; 
between the columns } 
} 


BD 2. Save your changes to the file and then reload dlr_lw0414.html in your 
browser. Figure 6-44 shows the revised appearance of the column layout. 
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Figure 6-44 Dividing line in the column layout 


30 pixel gap between 
the columns 
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a one line 
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How It Will Impact You ttittuateae.”TCT 
Your world is about to change with widespread adoption of driverless cars. 2017 US. Department of Transportation hopes to publish a rule mandating 
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radar. GPS, proximity sensors, and computer image enhancement. This 


: : t tecont 2018 Tesla Motors expects to produce a version of fully self-driving cars, 
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In the United States, the National Highway Traffic Safety Administration all expect to sell vehicles that can drive themselves at least part of the time. 
(NHTSA) has proposed the following levels of autonomy for motorized vehicles: 2024 Jaguar expects to release an autonomous car 


2 pixel solid gray 


dividing line 


Column rules don’t take up any space in the layout; if they are wider than the 
specified gap, they will overlap the column content. Kyle notices that the column break 
in Google Chrome appears at an inconvenient location, leaving a single line and word 
at the start of the new column, making the text awkward to read. He would like you to 
revise the location of the column break. 


Managing Column Breaks 


By default, browsers automatically break the content within a column layout to keep 
the columns roughly the same height. As shown in Figure 6—44, this behavior can result 
in column breaks that make the text difficult to read. You can control the placement of 
column breaks through several CSS properties. As with page break styles discussed in 
Tutorial 5, you can control the size of column orphans (a line of text stranded at the 
bottom of a column) using the following orphans property: 


orphans: value; 


where value is the minimum number of lines stranded before a column break. 
Similarly, to control the size of column widows (a line of text placed at the top of a 
column), use the following widows property: 


widows: value; 


where value is the minimum number of lines placed after the column break. For 
example, the following style sets the column breaks within paragraphs to leave a 
minimum of 2 lines at the bottom and a minimum of 3 lines at the top of each column: 


article p { 
orphans: 2; 
widows: 3; 
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Another way to define a column break before or after an element is to use the properties 


break-before: type; 
break-after: type; 


where type is one of the following: auto (to allow the browser to automatically set the 
eer column break), always (to always place a column break), or avoid (to avoid placing a 
Proposed specifications sacs 
Fe So CU een column break). To control the placement of column breaks within an element use the 


break-after properties also property 
include type value of left, 
right, page, column, 
avoid-page, and avoid- 
column in order to define 
different break styles 

for columns and printed 


pages. 


break-inside: type; 


where type is either auto or avoid. For example, the following style rule always 
inserts a column break directly before any h2 heading that appears within an article: 


article h2 { 
break-before: always; 


} 


You can achieve the most cross-browser support for this property by using the 
following browser extensions: 


-webkit-column-break-inside: type; 
page-break-inside: type; 
break-inside: type; 
The extensions for the break-before and break-after properties follow a similar pattern. 


Kyle asks you to add styles that limit the size of orphans and widows around the 
column break in the article element to at least three lines each. 


To set the widows and orphans around the column breaks: 


BD 1. Return to the dir_columns.css file in your editor and add the following styles 
to the style rule for the article element: 


widows: 3; 
orphans: 3; 


Figure 6-45 highlights the code to define the size of the widows and 
orphans. 


Figure 6—45 Defining widows and orphans around column breaks 


1 only reen and ( \ th: lipx) { 


keeps at least three 
lines together after ns 
the column break a: eee 


| > gid < 
widows: SS 


keeps at least three orphans: 35 
lines together before 
the column break 


} gray; 


BD 2. Save your changes to the file and then reload the dir_lw0414.html file in your 
browser. Verify that the widows and orphans around the column break in the 
article are at least three lines apiece. 


Trouble? At the time of this writing, some browsers, such as the Firefox 
desktop browser, do not support the orphans and widows style properties as 
applied to column breaks. 


REFERENCE 
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The final edit that Kyle wants to make to the article is to have the article heading 
appear above the columns, rather than within the first column of the layout. 


Spanning Cell Columns 


For some layouts, you will want to have element content extend across all of the 
columns. You can create column-spanning content by applying the following 
column-span property 


column-span: span; 


where span is either none to prevent spanning or all to enable the content to span 
across all of the columns. 


Creating a Column Layout 
¢ To specify the number of columns in the layout, use 
column-count: value; 


where value is the number of columns in the layout. 
¢ To specify the width of the columns, use 


column-width: size; 


where size is the minimum width of the columns expressed in one of the CSS units of 
measure or as a percentage of the width of the element. 
¢ To set the size of the gap between columns, use 


column-gap: size; 


where size is the width of the gap. 
¢ To add a dividing line between the columns, use 


column-rule: border; 


where border is the format of the border. 

¢ To specify the width and number of columns in a single style property, use 
columns: width count; 
where width is the minimum width of each column and count is the total number of 


columns in the layout. 
¢ To control the size of orphans or widows around a column break, use 


orphans: value; 
widows: value; 


where value is the number of lines in the column break orphan or widow. 


Add a style rule so that the h1 heading, which currently appears in the first column 
of the article layout, spans across the columns. 


To create a column-spanning heading: 
BD 1. Return to the dir_columns.css file in your editor and, within the media query 


for desktop devices, add the following style rule for the h1 heading in the 
article element: 


article hi { 
column-span: all; 


} 
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Figure 6-46 highlights the new style rule to create a column-spanning 
heading. 


Figure 6-46 Creating a column-spanning heading 


widows: 33 
orphans: 3; 


} 


article hl { © 
column-span: all; 


# 


sets the heading so 
that it extends across 
all columns 


D 2. Save your changes to the file and then reload dlr_lw0414.html in your 
browser. Figure 6-47 shows the final layout of page article. 


Figure 6-47 Final column layout of the article 
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Trouble? At the time of this writing, the column-span property is not 
supported by the Firefox browser. 


Kyle is pleased with the layout you created for the driverless car article. He'll 
continue to develop the new layout for the DLR website and get back to you for help 
on his future projects. 
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" Session 6.2 Quick Check 


1. What are the three row group elements? 
a. head, footer, body 
b. theader, tfooter, tbody 
c. thead, tfoot, tbody 
d. tablehead, tablefoot, tablebody 
2. What element do you use to create a column group? 
a. col 
b. colgroup 
c. tcol 
d. tablecol 
3. Which of the following properties cannot be changed within a column group? 
a. font-size 
b. border 
c. width 
d. background 


REVIEW 


4. In the case of conflicting styles, how does HTML resolve the styles of the row 
group and the column group? 
a. The row group has precedence. 
b. The column group has precedence. 
c. Whichever is listed first has precedence. 
d. Whichever is listed last has precedence. 


5. To set the height of the table header row to 25 pixels, use: 
a. table thead {height: 25px;} 
b. table head {height: 25px; } 
c. table head tr {height: 25px;} 
d. table thead tr {height: 25px;} 
6. To display an unordered list as a table, use: 
a. ul {display: table; } 
b. ul 1i {display: table; } 
c. ul table {display: all;} 
d. You can’t display an unordered list as a table. 


7. To set the column width of an element to 25 pixels, use: 
a. width: 25px; 
b. column: 25px; 
c. column-width: 25px; 
d. columnWidth: 25px; 
8. To limit the number of lines stranded at the bottom of a column, use the: 
a. widow property 
b. orphan property 
c. column-gap property 
d. column-height property 
9. To put a column break before every h1 heading, use: 
a. hl {column-break: always; } 
b. hl {break-before: always; } 
c. hl {break: yes; } 
d. hi {break: true; } 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code6-1_txt.html, code6-1_layout.css, 
code6-1_table_txt.css 


CODE 


The Orangeville Public Library has four conference rooms that it makes available for public use daily. 
You've been asked to create a web page showing the room reservations for February 5, 2021. Use 
HTML table elements and CSS table styles to create the table shown in Figure 6-48. 


Coding Challenge 6-1 example page 


Orangeville Library Conference Room 


February 5, 2021 


Retirement Planning Seminar Friends of the Library | Algebra Tutoring 
Meeting 


free Scrapbooking Club Ubrary Reading jod interview free 
tunmheon Club Workshop 


Private Free Webinar Reservation | Chemistry Tutoring 
use 


City Panning Meeting iv City Planning Meeting 


Do the following: 


1. Open the code6-1_txt.html and code6-1_table_txt.css files from the html06 » code1 folder. 
Enter your name and the date in each document and save the files as code6-1.html and 
code6-1_table.css respectively. 

2. Go to the code6-1.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code6-1_layout.css and code6-1_table.css files. 

3. Below the body header, create a table using the table element. Add the following features to the 
table: 

a. Insert a caption containing the text February 5, 2021. 

b. Insert a column group containing a column with the id firstCol and a column with the id 
hourCols that spans 9 columns. 

c. Insert a table head group that contains a single row with th elements containing the text 
Conference Room and the times 8:00am through 4:00pm in one-hour increments. 

d. Insert a table body group that contains the four rows shown in Figure 6—48 for each of the 
four conference rooms. Within each row insert a th element containing the name of the 
conference room. Following that th cell insert the groups reserving the room in td elements. 
If a group has reserved a room for longer than an hour, have the td cell span the number of 
columns for that reservation. 

4. Save your changes and go to the code6-1_table.css file in your editor. 

5. Create the following style rules for the indicated elements: 

a. For the table element: Add a 20-pixel grooved gray border and collapse the table borders. 

b. For the th and td elements: Add a 1-pixel solid gray border, set the padding space to 5 pixels, 
and align the cell content with the top-left corner of the cell. 

c. For the caption element: Display the caption at the top-left of the table and set the font size 
of the caption text to 1.5em. 
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d. For col element with the id firstCol: Change the background color to yellow and set the 
column width to 150 pixels. 
e. For col element with the id hourCols: Set the column width to 75 pixels. 
f. Change the background color of the thead element to aqua. 
6. Save your changes to the file and then reload the code6-1.html file in your browser. Verify that 
the layout of the table resembles that shown in Figure 6-48. 
7. Submit the completed file to your instructor. 


Coding Challenge 2 


Data Files needed for this Coding Challenge: code6-2_txt.html, code6-2_table_txt.css, 
code6-2_layout.css 


CODE 


You've been tasked to create a crossword puzzle web page. The first step is to create the layout of the 
crossword puzzle table, including the numbering of the clues and the shading of the blank spaces. 
Figure 6-49 shows a preview of the completed table. 


Daily Crossword 


Do the following: 


1. Open the code6-2_txt.html and code6-2_table_txt.css files from the html06 » code2 folder. 
Enter your name and the date in each document and save the files as code6-2.html and 
code6-2_table.css respectively. 
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2. Go to the code6-2.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code6-2_layout.css and code6-2_table.css files. 


3. Within the page body insert a table element. 


4. Add a table header row group containing one row. Within that row insert a table heading cell 
that spans 8 columns and contains the text Daily Crossword. 


5. Add the table body section and within the table body, create the layout of the crossword puzzle 
subject to the following conditions: 


a. The table will contain 9 rows and 8 columns. 


b. Within each row will be a number of table data cells. If the cell is a blank cell shown in 
Figure 6-49, assign it the class name blank. If a blank cell covers multiple rows and/or 
columns, make that cell a spanning cell and adjust the number of cells in subsequent rows 
and columns accordingly to preserve the table layout. 


c. Several cells contain numbers that will be used as crossword puzzle clues. Number the 
appropriate cells from 1 up to 26 to match the layout in Figure 6-49. 


6. Save your changes to the file and then go to code6-2_table.css in your editor. 
7. Create the following style rules for the indicated elements: 
a. For the table element: Add a 20-pixel margin around the table and collapse the table borders. 


b. For the th element nested within the table row of the table header row group: Set the font 
color to white, the background color to red, and the font size to 1.5em. Add a 1-pixel solid 
gray border around the element. 


c. For every td element: Set the width and height to 50 pixels, the font size to 0.7em, the border 
to a 1-pixel solid gray, and align the text with the top-left corner of the cell. 


d. For every td element of the blank class: Change the background to a linear gradient going 
toward the bottom-right corner of the element and transitioning from red to gray. 


8. Save your changes to the file and then reload the code6-2.html file in your browser. Verify that 
the layout of the crossword puzzle resembles that shown in Figure 6—49. 


9. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code6-3_txt.html, code6-3_columns_txt.css, 
code6-3_layout.css, code6-3_image.jpg 


CODE 


You’ve been handed a web page that will display the opening chapter of the Charles Dickens novel, 
Great Expectations. You will lay out the text of the chapter in three columns as shown in Figure 6-50, 
with a divided line separating the columns. Write the code for the style sheet. 


Figure 6-50 Coding Challenge 6-3 example page 
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Do the following: 


1. Open the code6-3_txt.html and code6-3_columns_txt.css files from the html06 » code3 
folder. Enter your name and the date in each document and save the files as code6-3.html and 
code6-3_columns.css respectively. 

2. Go to the code6-3.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code6-3_layout.css and code6-3_columns.css files. Review the contents of the 
file and then save your changes. 

3. Go to the code6-3_columns.css file in your editor. 

4. Create a style rule for the article element to: Display the contents in a 3-column layout with a 
minimum column width of 350 pixels, separate the columns with a 5-pixel border in the ridge style 
and using the color value rgb(231, 231, 231), and set the space between the columns to 20 pixels. 

5. Create a style rule for the h1 element within the article element to: Span the heading across all 
columns, center the heading text, and set the font size to 3.5em with a letter spacing of 0.15em. 

6. Create a style rule for paragraphs within the article element to set the minimum size of 
widows and orphans to 4 lines. 


7. Save your changes to the file and then view the page in your browser to verify the contents 
match that shown in Figure 6-50. 


8. Submit the completed file to your instructor. 


Coding Challenge 4 


5 Data Files needed for this Coding Challenge: code6-4_txt.html, code6-4_debug_txt.css, 
a code6-4_layout.css 
Ww 
Q 


You have been given a web page containing the class schedule shown in Figure 6-51; however, 
there are several mistakes in the HTML file and the CSS style sheet. Find and fix the errors in both 
documents now. 


Figure 6-51 


Coding Challenge 6-4 example page 


Midwest Universit 


Do the following: 


1. Open the code6-4_txt.html and code6-4_txt_debug.css files from the html06 » code4 folder. 
Enter your name and the date in each document and save the files as code6-4.html and 
code6-4_debug.css respectively. 

2. Go to the code6-4.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code6-4_layout.css and code6-4_debug.css files. 
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3. There are five errors in the HTML file. Locate the errors and fix them. Use a validator to confirm 
that your file passes validation and that there is the correct number of cells within each table row. 


4. Go to the code6-4_debug.css file in your editor. There are seven separate syntax errors in the 
stylesheet. Locate and correct all seven and then save your changes. 


5. Test the code6-4_debug.css file in a validator to confirm that it passes validation with no errors or 
warnings reported. 

6. View the code6-4.html file in your browser under different screen widths and compare your 
page to Figure 6-51, confirming that your page layout matches the one shown in the figure. 

7. Submit the completed file to your instructor. 


Review Assignments 


Data Files needed for the Review Assignments: dlr_mornings_txt.html, dlr_tables2_txt.css, 
dir_columns2_txt.css, 2 CSS files, 3 PNG files 


Kyle has reviewed your work on the DLR nightly schedule page. He wants you to make a few 
changes to the layout and apply those changes to a new page that describes the DLR morning 
schedule. Kyle already has entered much of the web page content and style. He wants you to 
complete his work by creating and designing the web table listing the times and programs for the 
morning schedule. Figure 6-52 shows a preview of the morning schedule page. 


Figure 6-52 DLR Morning Schedule 
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Complete the following: 


1. Use your HTML editor to open the dlr_mornings_txt.html, dlr_tables2_txt.css and 
dir_columns2_txt.css files from the html06 » review folder. Enter your name and the date in the 
comment section of each file, and save them as dlr_mornings.html, dlr_tables2.css and 
dir_columns2.css respectively. 
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. Go to the dlr_mornings.html file in your editor. Insert links to the dlr_tables2.css and 


dlr_columns2.css style sheets. 


. Scroll down the file and directly below the paragraph element, insert a web table with the class 


name programs. 


4. Add a table caption containing the text All Times Central. 


18. 


19. 


20. 


Alle 
Dye 


235 


24. 


. Below the caption, insert a colgroup element containing three columns. The first col element 


should have the class name timeColumn. The second col element should have the class 
name wDayColumns and span five columns in the table that will contain the weekday programs. 
The last col element should have the class name wEndColumns and span the last two columns 
containing the weekend programming. 


. Add the thead row group element containing a single table row with th elements containing the 


text shown in Figure 6-52. 


. Add the tbody row group element containing the times and names of the different DLR programs 


from 5:00 a.m. to 12:00 p.m., Monday through Sunday, in half-hour intervals. The times should 
be placed in th elements and the program names in td elements. Create row- and column- 
spanning cells to match the layout of the days and times shown in Figure 6-52. 


. Add the t£oot row group element containing a single row with a single td element that spans 


8 columns and contains the text Support your Public Radio Station. 


. Close the dlr_mornings.html file, saving your changes. 
. Return to the dlr_tables2.css file in your editor and go to the Table Styles section. Create a style 


rule for the programs table that: (a) sets the width of the table to 100%, (b) adds a 15-pixel outset 
border with a color value of rgb(151, 151, 151), (c) defines the borders so that they are collapsed 
around the table, and (d) sets the font family to the font stack: Arial, Verdana, and sans-serif. 


. Create a style rule that sets the height of every table row to 25 pixels. 
. Create a style rule for every th and td element that: (a) adds a 1-pixel solid gray border, 


(b) aligns the cell content with the top of the cell, and (c) sets the padding space 5 pixels. 


. Go to the Table Caption Styles section and create a style rule that places the caption element at 


the bottom of the table and centered horizontally. 


. Go to the Table Column Styles section. For col elements belonging to the timeColumn class, create a 


style rule that sets the column width to 10% and the background color to the value rgb(215, 205, 151). 


. For col elements of the wDayColumns class, create a style rule that sets the column width to 


11% and the background color to rgb(236, 255, 211). 


. For col elements of the wEndColumns class, create a style rule that sets the column width to 


17% and the background color to rgb(255, 231, 255). 


. Kyle wants you to format the table heading cells from the table header row. Go to the Table 


Header Styles section and create a style rule to set the font color of the text within the thead 
element to white and the background color to a medium green with the value rgb(105, 177, 60). 
The different cells in the table header row should be formatted with different text and 
background colors. Using the first -of-type pseudo-class, create a style rule that changes the 
background color of the first th element with the thead element to rgb(153, 86, 7). 

Using the nth-of-type pseudo-class, create style rules that change the background color of the 
7 and 8" thelements within the thead element to rgb(153, 0, 153). 

Kyle wants the table footer to be formatted in a different text and background color from the rest 
of the table. Go to the Table Footer Styles section. Create a style rule for the tf£oot element that 
sets the font color to white and the background color to black. 

Save your changes to the dlr_tables2.css style sheet. 

Return to the dlr_columns2.css file in your editor. Kyle wants the introductory paragraph to 
appear in a three column layout for desktop devices. Within the Column Styles section, create a 
media query for screen devices with minimum widths of 641 pixels. 

Within the media query, create a style rule for the paragraph element that: (a) sets the column 
count to 3, (b) sets the column gap to 20 pixels, and (c) adds a 1-pixels solid black dividing line 
between columns. 

Save your changes to the dlr_columns2.css style sheet and then open the dlr_mornings.html file 
in your browser and verify that the table layout and design resemble that shown in Figure 6-52. 
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Case Problem 1 


Data Files needed for this Case Problem: mi_pricing_txt.html, mi_tables_txt.css, 2 CSS files, 
3 PNG files, 1 TXT file, 1 TTF file, 1 WOFF file 


APPLY 


Marlin Internet Luis Amador manages the website for Marlin Internet, an Internet service provider 
located in Crystal River, Florida. You have recently been hired to assist in the redesign of the 
company’s website. Luis has asked you to complete work he’s begun on a page describing different 
pricing plans offered by Marlin Internet. A preview of the page is shown in Figure 6-53. 


Marlin Internet Pricing page 
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Luis has already finished most of the page design. Your job will be to add a web table describing the 
different service plans and to write the CSS code to format the table’s appearance. 


Complete the following: 


1. Using your editor, open the mi_pricing_txt.html and mi_tables_txt.css files from the html06 > 
case1 folder. Enter your name and the date in the comment section of each file, and save them 
as mi_pricing.html and mi_tables.css respectively. 

2. Go to the mi_pricing.html file in your editor. Add a link to the mi_tables.css style sheet file to the 
document head. 

3. Directly after the paragraph in the article element insert a web table with the ID pricing. 

4. Add a colgroup element to the web table containing two col elements. The first col element 
should have the ID firstCol. The second col element should belong to the class dataCols and 
span 4 columns. 

5. Add a thead row group element containing two rows. In the first row, insert five th elements 
containing the text shown in Figure 6-53. The first heading cell should span two rows. In the 
second row, add four headings cells containing the prices of the plans shown in Figure 6-53. Use 
a br element to display the price information on two separate lines. 

6. Add a tbody row group element. In each row within the row group, add a th element containing 
the text shown in Figure 6-53 and four td elements containing the data values for each plan. 

7. Add a tfoot row group element containing a single table row with a heading th element 
displaying the text Summary. Add four data td elements containing a description of each of the 
service plans. (Note: You can copy the summary text for each service plan from the mi_data.txt 
file in the html06/case1 folder.) 

8. Save your changes to the file and then return to the mi_tables.css file in your editor. 

9. Go to the Table Styles section and add a style rule for the table element that: (a) sets the 
background color to a linear gradient that goes to the bottom of the table background starting 
from rgb(190, 215, 255) and ending in black and (b) adds a 5-pixel solid gray border. 

10. For every th and td element in the table, create a style rule that: (a) adds a 3-pixel solid gray 
border, (b) sets the line height to 1.4em, and (c) sets the padding space to 8 pixels. 

11. For every th element, create a style rule that: (a) sets the background color to black, (b) sets the 
font color to rgb(130, 210, 255), and (c) sets the font weight to normal. 

12. For every td element, create a style rule that: (a) sets the font color to white, (b) sets the font size 
to 0.9em, and (c) aligns the cell text with the top of the cell. 

13. Go to the Column Styles section. Create a style rule for col elements with the ID firstCol that sets 
the column width to 24%. 

14. Create a style rule for col elements belonging to the dataCols class that sets the column width 
to 19%. 

15. Go to the Table Header Styles section. Create a style rule for the table header row group 
including every row within that row group that sets the row height to 60 pixels. 

16. For the first th element in the first row of the table header row group, create a style rule that sets 
its font size to 2em. (Hint: Use the first-of-type pseudo-class to select the first table row and 
first heading cell.) 

17. For th elements in the first row of the table header row group that are not the first heading cell, 
create a style rule that sets the background color to transparent and the font color to black. (Hint: 
use the not selector with the first-of-type pseudo-class to select headings that are not first in 
the table row.) 

18. Save your changes to the style sheet and then open the mi_pricing.html file in your browser and 
verify that the table layout and design resemble that shown in Figure 6-53. 
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Case Problem 2 


Data Files needed for this Case Problem: Iht_sept_txt.html, Iht_tables_txt.css, Iht_columns_txt.css, 
2 CSS files, 3 PNG files, 1 TXT file 


The Lyman Hall Theater Lewis Kern is an events manager at the Lyman Hall Theater in Brookhaven, 
Georgia. The theater is in the process of updating its website, and Lewis has asked you to work on 
the pages detailing events in the upcoming year. He’s asked you to create a calendar page that lists 
the upcoming events for September. A list of the events is stored in the Iht_schedule.txt file. 


CHALLENGE 


Lewis wants a responsive design so that the calendar is readable for both mobile and desktop users. 
In addition to the calendar, Lewis wants the article describing the September events displayed in 
column layout. He suggests that you set the width of the columns, allowing the number of columns 
to be determined based on the width of the display screen. Figure 6-54 shows a preview of the page 
you will create for the theater viewed using mobile and desktop devices. 


Figure 6-54 The Lyman Hall Theater September Calendar 
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Complete the following: 


1. 


Using your editor, open the Iht_sept_txt.html, Iht_tables_txt.css, and Iht_columns_txt.css files 
from the html06 » case2 folder. Enter your name and the date in the comment section of each 
file, and save them as Iht_sept.html, Iht_tables.css, and Iht_columns.css respectively. 


. Go to the Iht_sept.html file in your editor. Add links to the Iht_tables.css and Iht_columns.css 


files to the document head. 


. Directly below the article element, insert a web table using the ID calendar. 


4. Add a caption with the text September 2021 Calendar. 


We) 


12. 


3. 


14. 


15. 


16. 


. Add a column group containing two col elements. Give the first col element the class name 


weekdays and have it span five columns. Give the second col element the class name weekends 
and have it span 2 columns. 


. Add the table header row group with a single row with seven heading cells containing the three- 


letter day abbreviations Sun through Sat. 


. Add the table body row group with five rows and seven data cells within each row. Within each 


table cell, add the following code to create an h1 heading and description list: 


<h1l>day</h1> 
<dl> 
<dt>event</dt> 
<dd>time</dd> 
<dd>price</dd> 
</dl> 


where day is the day of the month, event is the name of an event occurring on that day, time is 
the time of the event, and price is the admission price, using the days, events, times, and prices 
shown in the Iht_schedule.txt file. If there is no event scheduled for the day, insert only the code 
for the h1 heading. Start your calendar with August 29 and conclude it with October 2. 


Explore 8. For each data cell you create in the table body, add an attribute in the opening td tab 
named data-date containing the date associated with the cell. For example, in the first table cell, 
enter data-date value "Sun, Aug 29, 2021", the second cell will have the data-date value "Mon, 
Aug 30, 2021" and so forth. (Note: This code will be used to display the date information in the 
mobile layout.) 


. Save your changes to the file and then return to the Iht_tables.css file in your editor. 
. Within the Mobile Styles section, insert a media query for screen devices with a maximum width 


of 640 pixels. 

Explore 11. You want mobile devices to display the calendar information in two columns. To 
create this layout, add the style rules that: (a) displays table, tbody, tr, td, th, and caption 
elements as blocks, (b) does not display the thead h1 element, and (c) displays the table caption 
in white on a medium gray background with a font size of 1.5em and a line height of 2em. 
Create a style rule for every data cell that: (a) adds a 1-pixel dotted gray border, (b) changes 

the text color to rgb(11, 12, 145), (c) places the cell using relative positioning, (d) sets the left 
padding to 40%, and e) sets the minimum height to 40 pixels. 

Create a style rule that uses the nth-of-type pseudo-class to display every odd-numbered table 
row with a background color of rgb(255, 235, 178) and a 2-pixel solid gray border. 

Create a style rule that inserts the text of the data-date attribute before every data cell. Place 

the attribute text using absolute positioning at the coordinates (0, 0) with a width of 40% and 
padding space of 5 pixels. 

Next, you design the layout of the calendar for tablet and desktop devices. Go to the Tablet and 
Desktop Styles section and insert a media query for screen devices with a minimum width of 
641 pixels. 

Create a style rule for the table element that: (a) displays the background image Iht_photo1. 
png with no tiling in the bottom-right corner of the table with a width of 40%, (b) adds a 6-pixel 
double border with color value rgb(154, 64, 3), (c) collapses the table borders, (d) centers the 
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table by setting the top/bottom margins to 20 pixels and the left/right margins to auto, (e) uses a 
fixed layout for the table content, and (f) sets the width of the table to 85%. 

For every heading and data cell, create a style rule that: (a) adds a 1-pixel solid gray border, 

(b) sets the font size to 0.85em and with normal weight, (c) adds a 5-pixel padding space, 

(d) aligns the cell text with the top of the cell, (e) sets the width to 14.28%, and (f) allows the 
browser to wrap cell text within individual words. (Hint: Use the word-wrap property.) 

For every data cell, create a style rule that: (a) applies a semi-transparent background color with 
the value rgba(171, 171, 171, 0.6) and (b) sets the text color to rgb(11, 12, 145). 


<» Explore 19. Lewis wants the September dates to appear in a different format from the August 


20. 


Pal 


DD 


Bo 


24. 


and October dates. Create a style rule for data cells whose data-date attribute contains the text 
Sep that: (a) changes the background color to the semi-transparent value rgba(232, 214, 148, 0.6) 
and (b) adds a gray inset box shadow with horizontal and vertical offsets of 0 pixels and a blur of 
20 pixels. (Hint: See Figure 2-15 for a list of attribute selectors.) 

Create a style rule for the table caption that: (a) displays the caption at the top of the table, 

(b) centers the caption text, (c) adds 10 pixels to the bottom padding space, and (d) sets the font 
size to 1.2em and the letter spacing to 3 pixels. 


. For heading cells within the table header, create a style rule to change the background color to 


rgb(154, 64, 3) and the text color to white. 


. Save your changes to the style sheet, then go to the Iht_columns.css file in your editor and within 


the Column Styles section, create a style rule for the article element that: (a) sets the column 
width to 260 pixels, (b) sets the column gap to 20 pixels, (c) adds a 1-pixel solid dividing line 
between columns with color value rgb(154, 64, 31), and (d) sets the minimum size of widows 
and orphans to 2 lines. 

Create a style rule for the h1 heading with the article element that extends the heading across 
all columns. 


Save your changes to the style sheet and then open the Iht_sept.html file in your browser. Verify 
that for desktop widths, the table appears as shown in right image of Figure 6-54 and the number 
of columns used in the introductory article changes from 2 to 3 based on the page width. Reduce 
the page width to below 640 pixels and verify that the calendar information is displayed in two 
columns as shown in the left image in Figure 6-54. 
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Alice Nichols is a manager at Red Ball Pizza, a popular pizzeria 

in Ormond Beach, Florida. She wants to conduct an online survey 
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Structure of a Web Form 


Customer Survey 


Thank you for taking our customer survey. Your response helps Red Ball 
Pizza maintain the tradition that has made us the top-rated pizzeria in the 
metro area. All participants are automatically entered into a monthly 
drawing to receive a Red Ball Express PizzaFest containing two large 
pizzas, a 2-liter soda, and a side order of chicken wings. Check your e- 


mail inbox for contest results. Thebes seems ae seas 
at the top-left corner of the 
field set by default. 


Surveys are]private and confidential. Red Ball Pizza will not share your 


- Customer Information 5 


™- 


An input control box 
displaying placeholder text 
A default value appears in 
the input box. 


[Ormond Beach : 


| 


Placeholder text is dimmed 
within the input box 


A label associated 
with an input control 
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Introducing Web Forms 


So far, the websites you have created have been passive: allowing the user to view 
information but not allowing the user to directly interact with the page’s content, except 
via hyperlinks. Starting with this tutorial, you will begin working with more interactive 
websites that allow for user feedback. The most common way of accepting user input is 
through a web form, which allows users to enter data that can be saved and processed. 


Parts of a Web Form 


A web form contains controls, also known as widgets, which are the objects that allow 
the user to interact with the form. HTML supports several types of controls and widgets, 
including: 


Controls 


¢ input boxes for inserting text strings and numeric values 

* option buttons, also called radio buttons, for selecting data values from a small 
predefined set of options 

¢ selection lists for selecting data values from a more extensive list of options 

¢ check boxes for selecting data values limited to two possibilities, such as “yes” or “no” 

¢ text area boxes for entering text strings that may include several lines of content 


7 


Widgets 


¢ spin boxes for entering integer values confined to a specified range 

¢ slider controls for entering numeric values confined to a specified range 
¢ calendar controls for selecting date and time values 

¢ color pickers for choosing color values 


Figure 7-1 shows Alice’s sketch of the web form she wants you to create. 


Figure 7-1 Proposed survey form 


option buttons calendar control 


Share Your Experience at Red Ball Pizza 


-—Customer Information 


Name* Date of visit 
City ————— 
Was your service friendly? ]} Yes O No O 
State fants ner ee | 
Was your order correct? |] YesQ No O 
Rostal coae Was your food hot? Yes O No O 
bo 


Rate your overall service O———_{}—10 
E-mail* (O = poor; 10 = great) 


i | 
= heats Where did you Tell us more about your experience! 
SelOcutoln I [kers hear about us? a 


What's your favorite Red 
Ball special dish? 

How many times do you B 
dine out per month? 


spin box 


Add me to your newsletter 
for great specials 
L 


check box 


text area box slider control 
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Alice’s proposed form includes several of the controls discussed above, such as input 
boxes for entering the customer name, contact information, and email address; option 
buttons for storing the customer’s service experience; and a selection list from which 
customers can choose how they heard about Red Ball Pizza from a long list of options. 

Each data entry control is associated with a data field or field in which data values 
supplied by the user are stored. For example, the input box in which a customer enters 
his or her name is associated with the custName field, the calendar control in which 
the customer enters the date he or she visited Red Ball Pizza is associated with the 
visitDate field, and so forth. 


Forms and Server-Based Programs 


Once the field values have been entered by the user, they are processed by a program 
running on the user’s computer or on a web server in a secure location. For example, 
a web form is used to collect sales data from the customer for an order and the server 
program processes that data and handles the billing and delivery of the sales items. 
See Figure 7-2. 


Figure 7-2 Interaction between the web form and the server 


data from the web form is 
sent to a program running 
on the server 


TT 
TN 


I 


feedback from the 
server can be sent back 
to the browser 


Alice is already working with a programmer on a web server program that will store 
and interpret the survey results. You will not have access to that program, so Alice just 
wants you to concentrate on the design of the web form. Your colleagues will test your 
form to verify that the information is being collected and processed correctly by the 
web server. 
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HTML also supports the 
name attribute for uniquely 
identifying forms. 


INSIGHT 


Restricting Access to Web Server Programs 


Since the web form designer might not have permission to create or edit the 
programs running on the web servers, he or she will usually receive instructions 
about how to interact with the server programs. These instructions often include a 
list of fields that are required by the program and a description of the types of values 
expected in those fields. 

There are several reasons to restrict direct access to these programs. The primary 
reason is that, when you run a server-based program, you are interacting directly with 
the server environment. Mindful of the security risks that computer hackers present 
and the drain on system resources caused by large numbers of programs running 
simultaneously, system administrators are understandably careful to maintain strict 
control over access to their servers and systems. 

Server-based programs are written in a variety of languages. The earliest and 
most common of these programs is Common Gateway Interface (CGI), which are 
scripts written in a language called Perl. Other popular languages widely used today 
for writing server-based programs include ASP, ColdFusion, C, Java, PHP, Python, 
and Ruby. You can check with your ISP or system administrator to find out what 
programs are available on your web server, and what rights and privileges you have 
in accessing them. 


Starting a Web Form 
All web forms are marked using the following form element 


<form id="text" attributes> 
content 
</form> 


where the id attribute identifies the form (which is important when more than one 
form is being used on the web page), attributes specify how the form should be 
processed by the browser, and content is the form’s content. Forms typically contain 
many of the controls that were listed earlier, but they also can contain page elements 
such as tables, paragraphs, inline images, and headings. A form element can be placed 
anywhere within the body of the page. 


REFERENCE 


Inserting a Web Form 


e To insert a web form, add 
<form id="text" attributes> 
content 
</form> 


where text identifies the form, attributes control how the form is processed, and 
content is the content of the form. 


Add a form to Alice’s survey page now with the ID survey. 
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To insert a web form: 


BD 1. Use your editor to open the rb_survey_txt.html file from the html07 > 
tutorial folder. Enter your name and the date in the comment section of the 
file and save it as rb_survey.html. 


D2. Scroll down and, directly after the third paragraph in the section element, 
insert the following form element: 


<form id="survey"> 
</form> 


Figure 7-3 shows the placement of the web form. 


Inserting a web form 


form id identifies 


the form 


<p>Required values are marked by an asterisk (*)</p> 


<form id="survey"> 


</form> 


form element 
marks the web { 


form contents 


Next, you will include attributes that tell the browser how the form should interact 
with the web server. 


Interacting with the Web Server 


To specify where to send the form data and how to send it, include the following 
action, method, and enctype attributes 


<form action="url" method="type" enctype="type"> 
content 
</form> 


where the action attribute provides the location of the web server program that 
processes the form, the method attribute specifies how the browser should send form 
data to the server, and the enctype attribute specifies how the form data should be 
encoded as it is sent to the server. 

The method attribute has two possible values: get and post. The default is the 
get method, which tells the browser to append the form data to the end of the URL 
specified in the action attribute. The post method sends the form data in its own 
separate data stream. Each method has its uses, but the post method is considered 
to be a more secure form of data transfer. Your website administrator can supply the 
necessary information about which of the two methods you should use when accessing 
the scripts running on the server. 

The enctype attribute has three possible values summarized in Figure 7-4. 
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Figure 7—4 Values of the enctype attribute 


Value Description 

application/x-www-form-urlencoded The default format in which the data is encoded as a 
long text string with spaces replaced by the + character 
and special characters (including tabs and line breaks) 
replaced with their hexadecimal code values 


multipart/form-data The format used when uploading files in which no 
encoding of the data values occurs 


text/plain The format in which data is transferred as plain text 
with spaces replaced with the + character but no other 
encoding of the data values occurs 


Alice tells you that your survey form will be processed by the CGI script using the 
action attribute accessing a server program located at the fictional URL address 
http://www.example.com/redball/survey with the post method. You do not have to 
specify a value for the enctype attribute because the default value of application 
/x-www-form-urlencoded is sufficient. Add this information to your web form. 


To specify how the form interacts with the server: 
BD 1. Return to the opening <form> tag and add the following attributes: 


action="http://www.example.com/redball/survey" 
method="post" 


Figure 7-5 highlights the newly added form attributes. 


— Figure7-5 Associating the web form with an action and a method 


equired value are marked by an asterisk = p 


id="survey" action="http: //waw.example.com/redball/survey" method="post" 


the form data is 
sent to the server 


location of server method by which 
processing the form 


BD 2. Save your changes to the file. 


Because http://www.example.com/redball/survey does not correspond to a real CGI 
script running on the web and thus cannot process the survey form you will create in 
this tutorial, you will add a JavaScript program named rb_formsubmit.js to handle the 
form. The purpose of this JavaScript program is to intercept the content of the form 
before the browser attempts to contact the CGI script and report whether or not the 
data contained in the survey form has been correctly filled out. The JavaScript program 
has already been created, so you will create a link to the file using the following 
script element: 


<script src="rb_ formsubmit.js"></script> 
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A script element is an HTML element used to access and run JavaScript programs 
that will run within the user’s browser. You will learn more about scripts and their 
applications in Tutorial 9, but for now, you add this code to the document head so that 
it can be applied throughout this tutorial. 


To insert a script: 


BD 1. Scroll up to the document head and insert the following code directly above 
the closing </head> tag: 


<script src="rb formsubmit.js"></script> 


Figure 7-6 highlights the code for the script element. 


Figure 7-6 Using a script to manage the form submission 


<title>Red Ball Survey</title> 
<link href="rb_reset.css" rel="stylesheet" /> 
<link href="rb_styles.css" rel="stylesheet" /> 
<script src="rb_formsubmit.js"></script> 
</head> 


the script element runs 
JavaScript programs 
within the browser 


( external JavaScript file) 


D 2. Save your changes to the file. 


Now that you have added the form element to the survey page, you can start 
populating the survey form with controls and other form features. You will start by 
adding field sets. 


Creating a Field Set 


Because a web form can have dozens of different fields, you can make your form easier 
to interpret and more accessible by grouping fields that share a common purpose into a 
field set. Field sets are created using the following £ieldset element 


<fieldset id="id"> 
content 
</fieldset> 


where id identifies the field set and content is the form content within the field set. An 
id is not required, but it is useful in distinguishing one field set from another. 


Marking a Field Set 


Alice wants you to organize the form into two field sets: the custInfo field set will 
enclose the fields containing contact information for Red Ball Pizza customers and the 
expInfo field set will enclose the fields that record those customers’ impressions of the 
restaurant. 
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To add field sets to a form: 


BD 1. Scroll back to the web form and, within the form element, insert the 
following fieldset elements: 


<fieldset id="custInfo"> 
</fieldset> 


<fieldset id="expInfo"> 
</fieldset> 


Figure 7-7 highlights the code for the two new field sets. 


Inserting field sets 


<form id="survey" action="http: //ww.example.com/redball/survey" method="post" 
«fieldset id="custInfo"> 
«/fieldset> 


id associated with 

each fieldset element 
<fieldset id="expInfo"> 
</fieldset> 

form 


D 2. Save your changes to the file. 


The default browser style is to place a border around the field set to set it off visually 
from other elements in the web form. Field sets act like block elements that expand to 
accommodate their content. Before viewing the two field sets in your browser, you will 
add a legend. 


Adding a Field Set Legend 


Every field set can contain a legend describing its content using the following legend 
element 


<legend>text</legend> 


where text is the text of the legend. The legend element contains only text and no 
nested elements. By default, legends are placed in the top-left corner of the field set 
box, though they can be moved to a different location using the CSS positioning styles. 


Creating a Field Set 


G e To create a field set, add 
< <fieldset id="id"> 
& content 

LL </fieldset> 

Lu 

[a 


where id identifies the field set and content is the form content within the field set. 
° To add a legend to a field set, place the following element within the fieldset 
element: 


<legend>text</legend> 


where text is the text of the legend. 
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Based on Alice’s sketch from Figure 7-1, add the legend text “Customer Information” 
and “Share Your Experience at Red Ball Pizza” to the two field sets you just created. 


To add legends to the field sets: 
DB 1. Within the custlnfo field set, add the following legend element: 


<legend>Customer Information</legend> 


D 2. Within the explnfo field set, add the legend: 


<legend>Share Your Experience at Red Ball Pizza</legend> 
Figure 7-8 highlights the code for the two legends. 


id m sur vey" o t7 mM . 


"http: //www.example.com/redbalLtl irvey" method="p 
fieldset id="custInfo" 


<legend>Customer Information</legend> 


re set 


legend associated 
with each field set 


‘ 


eldset id=" 


<legend>Share Your Experiences at Red Ball Pizza</legend> 


Tle ># 


BD 3. Save your changes to the file and then open the rb_survey.html file in your 
browser. Figure 7-9 shows the appearance of the two field sets. 


Legends displayed in the field set box 


Customer Survey 


field set legend 


f 


The default browser 
style is to add a border 
around a field set 


The field sets you added are currently empty, so they appear small and narrow on 


the survey page. Next, you will populate the field set with the controls that will be used 
to insert different field values. 
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Creating Input Boxes 


Because most form controls are designed to receive user input, they are marked using 
the following input element 


<input name="name" id="id" type="type" /> 


where the name attribute provides the name of the data field associated with the 
control, the id attribute identifies the control in which the user enters the field value, 
and the type attribute indicates the data type of the field. When the form is submitted 
to the server, the field name is paired with the field value; thus, you always need a 
name attribute if you are submitting the form to a server. The id attribute is required 
only when you need to reference the control, as would be the case when applying a 
CSS style to format the control’s appearance. 


Input Types 


At the time of this writing, HTML supports twenty-two different values for the type 
attribute. Each input type is associated with a different form control, usually one that 

is tailored to make it easy for the user to enter data that matches the input type. For 
example, an input type of password is displayed as an input box that hides the input 
text for security purposes. Figure 7-10 describes the different type values for the input 
element and how their controls are typically displayed in most current browsers. If no 
type value is specified, the browser assumes a default value of text and adds a simple 
text input box to the web form. 


Figure 7-10 Controls and the input type attribute 


Type Value Control Displayed by the Browser 

button A button that can be clicked to perform an action 
checkbox A check box for yes/no or true/false responses 

color A widget from which users can select a color 

date A widget from which users can select a calendar date 


datetime-local 
email 

file 
hidden 
image 
month 
number 
password 
radio 
range 
reset 
search 
submit 
tel 

text 

time 

url 


week 


A widget from which users can select a calendar date and time 
An input box used for email addresses 

A widget from which users can select a local file 

A control that is hidden from the user 


An image that can be clicked to perform an action 


A widget from which users can select a calendar month and year 
A spin box from which users can select a numeric value 

An input box in which the entry value is hidden by * symbols 

A radio or option button that can be clicked by the user 

A slider from which users can select a numeric value within a defined range 
A button that can be clicked to reset the web form 

A widget that can be used to search for a defined term 

A button that can be clicked to submit the form for processing 
An input box used for telephone numbers 

An input box used for text entries (the default) 

A widget from which users can select a time value 

An input box used for entering URLs 


A widget from which users can select a week value 


REFERENCE 
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Creating an Input Control 


¢ To create an input control for data entry, add the element 


<input name="name" id="id" type="type" /> 


where name provides the name of the field associated with the control, id identifies 
the control in which the user enters the field value, and type indicates the type of 
control displayed by the browser. 


The first input elements you will add to the survey form will be input boxes in 
which the customer enters his or her name, street address, city, state, postal code, 
phone number, and e-mail address. For the program running on the web server, these 
input boxes with be associated with data fields named custName, custStreet, custCity, 
custState, custZip, custPhone, and custEmail, respectively. You will identify the controls 
for these fields with the ids: name, street, city, state, zip, phone, and mail. Before each 
input element, you will insert a text string that describes the content of the input box. 


To add input elements: 


BD 1. Within the custInfo field set, add the following text strings and input 


elements: 

Name* 

<input name="custName" id="name" type="text" /> 
Street address 

<input name="custStreet" id="street" type="text" /> 
Caley, 

<input name="custCity" id="city" type="text" /> 
State 

<input name="custState" id="state" type="text" /> 
Postal code 

<input name="custZip" id="zip" type="text" /> 


Phone number 


<input 


E-mail* 


<input 


name="custPhone" id="phone" type="tel" /> 


name="custEmail" id="mail" type="email" /> 


Figure 7-11 highlights the code for the newly inserted input elements. 
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Figure 7-11 Adding input elements to the form 


name of the field 
associated with 
the input box 


id of the input box 
control for entering 
the customer name 


Name* 


Street address 


input boxes for 
general text entries 


city 


State 


Postal code 


telephone number 


Ge box for 


input box for email 
address 


> :. 


You can prevent users 
from entering data into 

a control by adding the 
attribute disabled to the 
element tag. 


E-mail* 


</fieldset> 


<fieldset id="cugtInfo"> 

<legend>Custonjer Information</|legend> 

<input name="custName" id="name" type="text"> 
<input name="custStreet" id="street" type="text" /> 
<input name="custCity" id="city" type="text" /> 
<input name="custState" id="state" type="text" /> 
<input name="custZip" id="zip" type="text" /> 


Phone number e oe _——— 
<input name="custPhone" id="phone" type="tel" /> 


<input name="custEmail" id="mail" type="email" /> 


BD 2. Save your changes to the file and then reload the rb_survey.html file in your 


browser. 


input box. 


Click the Name® input box on the form to make it active and type your name 
in the input box. Press the Tab key to move the insertion point to the next 


BD 4. Complete the form by entering your contact information in the remainder 
of the form, pressing the Tab key to move from one input box to the next. 
Figure 7-12 shows the completed data entry for the form. 


Figure 7-12 Displaying input boxes 


input box used to 
enter the customer 
street address 


Share Your Experfence at Red Ball Pizza 


Required values are marked by an asterisk (*) 
Customer Information 
Name* Alice Nichols Street addre 
FL Postal code 32175 
anéchols@ ex aenghe cam 


SS Sti Geach Dave CRY Onnoed Basch State 


Phone number (364) £55-7299 E-mail* 
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By default, browsers display input boxes as inline elements with a default length of 
20 characters. Later, you will explore how to format these controls to make them easier 
to read and work with. 


Navigating Forms with Access Keys 


You activate controls like input boxes either by clicking them with your mouse or by 
tabbing from one control to another. As your forms get longer, you might want to give 
users the ability to jump to a particular input box. This can be done with an access 

key. An access key is a single key on the keyboard that you press in conjunction with 
another key, commonly the Alt key for Windows users or the control key for Mac users, 
to jump to a spot in the web page. You create an access key by adding the accesskey 
attribute to the HTML element that creates the control. For example, to create an 
access key for the custName input box, you would enter the following code: 


INSIGHT 


<input name="custName" id="custName" accesskey="1" /> 


If a user types Alt+1 (or control+1 for Mac users), the insertion point automatically 
moves to the custName input box. Note that you must use letters that are not reserved 
by your browser. For example, Alt+f is used by many browsers to access the File menu 
and thus should not be used as an access key. Access keys also can be used with 
hypertext links and are particularly helpful to users with impaired motor skills who find it 
difficult to use a mouse or others who prefer not to use a mouse. 

Note that you should test your access keys with different browsers since a keyboard 
shortcut on one browser might not work with another. Your form can be enhanced 
through the use of access keys but it should not rely on them. 


Input Types and Virtual Keyboards 


Most mobile and tablet devices do not have physical keyboards; instead, they use 
virtual keyboards that exist as software representations of the physical device. One 
way that web forms can be made responsive to the needs of mobile and touch devices 
is by displaying different virtual keyboards for each input type. With an input box 

for telephone numbers, it is more convenient to have digits (instead of alphabetic 
characters) prominently displayed on the keyboard. Figure 7-13 shows the virtual 
keyboards that will be displayed based on the value of the type attribute. 


Virtual keyboards for different input types 


182030405868 7580950 1$2)3)4)5)6/7)8)910 1 2 3 a 
QWeE R'TIY U'1°0O'P qiwielritlylulilolp : 
iat a a 4 5 6 Next 
AQS DIF) GH) J KEL ais di figihij kit ' . " 
°Z X'C\ViBINIM @& tizixicivibinim) @ t 8} 9 
Sym 8, ba : Go Sym § @ ae . }.com)) Go 0 = } 
type="text" type="email" type="number" 
TE2E304050687581970 
1 |2~|3~] a] paises 
whebtret ulilo 
Aw1S «16 ol net) be = E 
= aisidifigqth#j kil 
$s 
Liles 1 9 = F hzixicivibinimie 
* O # ei sym / pita www. Ge 
type="tel" type="url" 
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Always include a type 
attribute in your input box 
so that a user's device can 
choose a keyboard best 
suited for the form control. 


Note that for email addresses the @ key is prominently displayed as well as a key that 
inserts the .com character string. Similarly, for url data, the virtual keyboard includes a 
key that inserts the www. character string. The choice and layout of the virtual keyboard 
is determined by the operating system of the device. 


Adding Field Labels 


In the last set of steps, you entered a descriptive text string above each input element 
to indicate what content should be entered into the input box. However, nothing in the 
HTML code explicitly associates that descriptive text with the input box. To associate 

a text string with a control, you enclose the text string within the following label 
element 


<label for="id">label text</label> 


where id is the id of the control that you want associated with the label, and label 
text is the text of the label. For example, the following code associates the label text 
“Street address” with the input box for the custStreet control: 


<label for="street">Street address</label> 
<input name="custStreet" id="street" type="text" /> 


You also can make this association implicitly by nesting the control, such as an 
input element, within the Label element as in the following code: 


<label> 

Street address 

<input name="custStreet" id="street" /> 
</label> 


Notice that you do not need to include a for attribute when you nest the control 
since the association is made implicit. 

Which approach you use depends on how you want to lay out a form’s content. 
When you use the for attribute, you can place the label text anywhere within the page 
and it will still be associated with the control. However, by nesting the control within 
the label, you can treat both the control and its label as a single object, which can 
make form layout easier because you can move both the label text and the control as a 
single unit around the page. Depending on the layout of your form, you might use both 
approaches. 


REFERENCE 


Creating a Field Label 


¢ To explicitly associate a text label with a control, use the following label element and 
the for attribute 


<label for="id">label text</label> 


where id identifies the control associated with the label. 
¢ To implicitly associate a text label with a control, nest the control within the Label 
element as follows 


<label> 
dabei text 
control 
</label> 


where control is the HTML code for the form control. 


Tutorial 7 Designing a Web Form | HTML 5 and CSS Wabi) Bex) 


Once you associate a label with a control, clicking the label activates the control. In 
the case of input boxes, clicking the label would automatically move the insertion point 
into the input box, making it ready for data entry. With date or color types, clicking the 
label will display the calendar or color picker widget. 

Use the label element and for attribute now to associate the text strings you entered 
in the last set of steps with their corresponding input boxes. 


To insert form labels: 


BD 1. Return to the rb_survey.html file in your editor. 
D 2. Gea Hs Gin Hold eotianel sgciee ths tactile 


D 3. Repeat Step 2 for the remaining descriptive text strings in the custInfo field set, 
using the for attribute to associate each text string with the id of the subsequent 
input element. Figure 7-14 highlights the newly added code in the web form. 


for attribute associates the label 


with the name input box 


<legend>Custqmer Information</ legend> 


label element <label for="name">Name*</Label> 


<input name="custName" id="name" type="text"> 


<label for="street">Street address</label> 


<input name="custStreet" id="street" type="text" /> 


gabe Fay" > ci tyeaETS 
<input name="custCity" id="city" type="text" /> 


<input name="custState" id="state" type="text" /> 


<label for="zip">Postal code</label> 


<input name="custZip" id="zip" type="text" /> 


<label for="phone">Phone number</label> 


<input name="custPhone" id="phone" type="tel" /> 


<label for="mail">E-mail*</label> 


<input name="custEmail" id="mail" type="email" /> 


BD 4. Save your changes to the file and then reload the rb_survey.html file in your 
browser. 


D 5. Test the labels by clicking each label and verifying that the insertion point appears 
within the corresponding input box, making that control active on the form. 


Alice stops by to see your progress on the survey form. In its current state, the form 
is difficult to read. She wants you to design a layout that will be easier to read and that 
will be responsive to both mobile and desktop devices. 


HTML 534 


In a two-column layout, 
you can move the label 
text even closer to the 
input controls by right 
aligning the label text. 
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Designing a Form Layout 


To be effective, the layout of your form should aid the user in interpreting the form and 
navigating easily from one input control to the next. There are two general layouts: 
one in which the labels are placed directly above the input controls in a single column 
and the other in which the labels and controls are placed side-by-side in two columns. 
See Figure 7-15. 


Figure 7-15 Form layouts 


[— Customer Information 
Name * 
Street address [— Customer Information 
| 
Name * 
J 
; =1 
City Street address 
City ] 
State 
State (abbr.) 
_| 
one-column layout two-column layout 


Usability studies have shown that a single column layout is more accessible because 
the labels are placed more closely to their input controls. However, for long forms 
involving many fields, a single column layout can be difficult to work with due to the 
extensive vertical space required. 

Alice wants you to use a single column layout for mobile devices due to the limited 
horizontal space on those devices, but she wants a two-column layout for devices with 
larger screen widths. To accomplish this, you will use a flex layout that will allow the 
labels and controls to assume flexible widths based on the available screen width of the 
device being used. 

First, you will nest each label and input box within a div element that will act as a 
flexbox container. 


To create a flexbox for the label and input elements: 


BD 1. Return to the rb_survey.html file in your editor and scroll down to the 
custInfo field set. 


D 2. Nest the label and input box for the custName field within the following div 
element, indenting the code to make it easier to read: 


<div class="formRow"> 

<label for="name">Name*</label> 

<input name="custName" id="name" type="text" /> 
</div> 


D 3. Repeat Step 2 for the remaining label and input box pairs, nesting each pair 
within a div element belonging to the formRow class. Figure 7-16 highlights 
the new code in the file. 
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Figure 7-16 Nesting labels and input controls within div elements 


<div class="formRow"> 


<label for="name">Name*</lLabel> 
<input name="custName" id="name" type="text" /> 
</div> 


<div class="formRow"> 

<label for="street">Street address</label> 

<input name="custStreet" id="street" type="text" /> 
</div> 
<div class="formRow"> 

<label for="city">City</label> 

<input name="custCity" id="city" type="text" /> 
</div> 


<div class="formRow"> 

<label for="state">State</label> 

<input name="custState" id="state" type="text" /> 
</div> 


<div class="formRow"> 

<label for="zip">Postal code</label> 

<input name="CcustZip" id="Zzip" type="text" /> 
</div> 


<div class="formRow"> 

<label for="phone">Phone number</label> 

<input name="custPhone" id="phone" type="tel" /> 
</div> 


<div class="formRow"> 
<label for="mai L">E-mail*</label> 
<input name="custEmail" id="mail" type="email" /> 


</div> 


Next, you will create a style rule that displays each div element of the formRow class 
as a flexbox and the objects that are direct children of those div elements as flex items. 


To add styles for a flexible form layout: 


DB 1. Scroll to the top of the rb_survey.html file and then, within the document 
head and directly above the script element, add a link to the rb_forms.css 
style sheet. 


D 2. Save your changes to the file and then use your editor to open the 
rb_forms_txt.css file from the html07 > tutorial folder. Enter your name and 
the date in the comment section of the file and save it as rb_forms.css. 
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D 3. Within the Forms Layout Styles section, add the following style rule to display 
the formRow div element as a flexbox with row orientation and a 7-pixel top 
and bottom margin: 
div.formRow { 
display: flex; 
flex-flow: row wrap; 
margin: 7px Opx; 

} 

D 4. Addthe following style rules to set the growth, shrink, and basis values of the 
objects that are direct children of the formRow div element: 


div.formRow > * { 
ler ab al allaoyersr 


} 


Figure 7-17 shows the new style rules in the style sheet. 


Figure 7-17 Adding styles to create a flexible layout 


Form Layout Styles 


(ae 5 > 
displays the div element daiwet 4 
with the class formRow div. formRow { 


as a horizontal flexbox di splay: flex; 
S flex-flow: row wrap; 


margin: 7px Opx; 


sets the top/bottom 
margins to 7 pixels } 
S —_ 


( a, | a: 
sets the flex sizes of div . fo rmRow a { 
objects that are direct [7—* flex: 1 1 150px; 
children of the formRow } 


div element 


4 


BD 5. Save your changes to the style sheet and then reload rb_survey.html in your 
browser. 


D 6. Resize your screen width to verify that the form layout changes between one 
and two columns as the screen changes width. See Figure 7-18. 


Figure 7-18 Flex layout of the labels and text input controls 


R 


narrow screen layout wide screen layout 
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Another way to set the width of an input box is by adding the following size 
attribute to the input element in the HTML file 


size="chars" 


where chars is the width of the input box in characters. For example, the following 
input element sets the width of the input box for the custState field to two characters: 


<input id="state" size="2" type="text" /> 


Note that this is not an exact measure because the width of individual characters varies 
depending on the typeface and font style. 

Alice suggests that you also use a flexible layout for the two field sets so that they are 
displayed side-by-side for wider screen devices and stacked for narrow screens. Create 
style rules now that will change the web form to a flexbox and the field sets as items 
within that flexbox. You will also add styles to change the appearance of the field set 
boxes themselves. 


To create a flexible layout for the form: 
BD 1. Return to the rb_forms.ess file in your editor. 


D 2. At the top of the Form Layout Styles section, insert the following style rule to 
display the survey form as a flexbox: 


form#survey { 
display: flex; 
flex-flow: row wrap; 


} 


BD 3. Add the following style rule to display the field sets within the survey form as 
flex items: 


form#survey > fieldset { 
background-color: rgb(241, 232, 181); 
border-radius: 20px; 
flex: 1 1 300px; 
font-size: 0.85em; 
padding: 10px; 
margin: 10px; 


} 


Figure 7-19 shows the new style rules in the style sheet. 


Figure 7-19 Creating a flexible layout for the form field sets 


form#survey { 
displays the survey display: flex; 
form as a textbox flex-flow: row wrap; sets the field set 


} background color 
to yellow-gold 


form#surveyy> fieldse 
applies rounded packground-color: rgb(241, 232, 181); 
corners to the field set porder-radius: 20px; 
sets the flex size 
of the field set 


defines the font size, font-size: 8.85em 


padding, and margin padding: 16px; 
spaces of the field set margin: 16px; 
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BD 4. Save your changes to the style sheet and then reload rb_survey.html in your 
browser. 


D 5. Resize your screen width and verify that the form layout changes from one 
column to two columns, with both field sets side by side as shown in Figure 
7-20 when the screen width is larger, to one column, with the field sets 
stacked vertically when the screen width is reduced. 


Figure 7-20 Flex layout of the field sets for a wide screen layout 


Customer Inforns68 —— Share Your Experience a Red Bali Pizza 


Finally, Alice wants the field set legends to stand out from the border. She suggests 
you change the text and background color of the legends. 


To set the style of the field set legend: 
BD 1. Return to the rb_forms.css file in your editor. 


BD 2. Go to the Legend Styles section and insert the following style rule: 


legend { 
background-color: rgb(179, 20, 25); 
color: white; 
padding: 5px; 


} 
Figure 7-21 highlights the style rule for the field set legend. 


Style rule for the field set legend 


sets the 
background 
color to red 


legend { ; 
background-color: rgb(179, 20, 25); 
color: white; 
padding: 5px; 


sets the text 
color to white 


adds 5 pixels of 
padding around 
the legend text 


} 


BD 3. Save your changes to the style sheet and then reload rb_survey.html in your 
browser. Verify that the two field set legends appear in white font on a red 
background. 


You can replace the default 
field value by entering a 
new value for the field. 


INSIGHT 
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Using the autocomplete Attribute 


Many browsers include an autocomplete feature that automatically completes an input 
control based on previous user entries. For example, a user who routinely fills in his or 
her street address in a multitude of web forms can enable the browser to remember 
that information and to insert it automatically into any address field from a web from. 

The autocomplete feature is a useful time-saver in most cases, but it also can be a 
security risk when using a computer located in a public place. After all, you may not 
want to have a private credit card number or password automatically filled in by a 
browser on a computer that other people will be using. 

One way to prevent this problem is through the autocomplete attribute which 
enables or disables the browser's autocomplete function. For example, the following 
input element prevents the browser from automatically filling out the creditCard field. 


<input name="creditCard" autocomplete="false" type="text" /> 


To enable the browser's autocomplete capability, set the value of the autocomplete 
attribute to true. 


It is easier to use the form with the new layout. However, more than 90% of Red Ball Pizza 
customers come from Ormond Beach in Florida. Rather than forcing these customers to 
enter that data, it would be simpler to have those values entered for them. You can do that 
using default values. 


Defining Default Values and Placeholders 


To specify a default field value, you add the following value attribute to the HTML 
element for the form control 


value="value" 


where value is the value that will be entered by default into the control unless the 
user enters a different value. For example, the following input element sets the default 
value of the custCity field to Ormond Beach: 


<input name="custCity" id="city" type="text" value="Ormond Beach" /> 


Set the default values for the custCity and custState fields to Ormond Beach and FL 
respectively. 


To define a default field value: 


D 1. Return to the rb_survey.html file in your editor and scroll down to the 
custInfo field set. 


BD 2. Add the attribute value="Ormond Beach" to the input element for the 
custCity input control. 


BD 3. Add the attribute value="FL" to the input element for the custState input 
control. 


Figure 7-22 highlights the attributes that add default values to the custCity 
and custState fields. 
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Defining the default field value 


sets the default value 
for the custCity field 


st name="custCity" id="city" type="text" value="Ormond Beach” 


put name="custState" id="state" type="text" value="FL" 


sets the default value 
for the custState field 


BD 4. Save your changes to the file and then reload rb_survey.html in your browser. 
Verify that the City and State input boxes show the text strings Ormond Beach 
and FL, respectively. 


Trouble? If the form does not reload with the replacement text, close the file 
and reopen it in your browser, which clears all fields and opens a new copy of 
the form. 


Placeholders are text strings that appear within a form control, providing a hint 
about the kind of data that should be entered into the field. However, unlike a default 
field value, a placeholder is not stored in the control as the field’s value. Placeholders 
are defined using the following placeholder attribute 


placeholder="text" 


where text is the text of the placeholder. For example, the following placeholder 
attribute provides guidance about the format users should use when entering values for 
the custPhone field: 


<input name="custPhone" id="phone" placeholder="(nnn) nnn-nnnn" /> 


When the browser displays the form, the text (nnn) nnn-nnnn appears grayed 
out in the input box indicating to the user that he or she should enter a phone 
number, including both the area code and the seven-digit number. The placeholder 
automatically disappears as soon as a user selects the control and begins to enter a 
value. 

Alice asks you to add placeholders to the input boxes for the custName, custZip, 
and custPhone fields. 


To define a placeholder: 
BD 1. Return to the rb_survey.html file in your editor. 


BD 2. Add the attribute placeholder="first and last name" to the input 
element for the custName field. 


D 3. Add the attribute placeholder="nnnnn (-nnnn)" to the input element for 
the custZip field. 
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BD 4. Add the attribute placeholder="(nnn) nnn-nnnn" to the input element for 
the custPhone field. 


Figure 7-23 highlights the placeholder attributes added to the form. 


Figure 7-23 Defining placeholder text 


placeholder text for 
the name input box 


name" type="text" placeholder="first and Last name" 


placeholder text for 
the zip input box 


" type="text" placeholder="nnann (-nnnn)" 


sme="custPhone in“phone" type="tel" placeholdere"(nnn) nnan-nnnn” 


placeholder text for 
the phone input box 


BD 5. Save your changes to the file and then reload rb_survey.html in your browser. 


As shown in Figure 7-24, placeholder text has been added to the Name, 
Postal code, and Phone input boxes. 


Figure 7-24 Viewing default values and placeholder text 
formatted field 
set legend 


default value 
for the custCity 
field 


placeholder text | 
for the name 
input box 


Customer Information 


Name* 


Street address 


default value for 
the custState field 


|Ormond Beach 


State 
Postal code 


Phone number 


placeholder text 
for zip input box 


placeholder text 
for the phone 
input box 


E-mail* 
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The moz extension 

for Firefox version 18 
and earlier treats the 
placeholder as a pseudo- 
class rather than a 
pseudo-element. 


PROSKILLS | 


The style of the placeholder text is determined by the browser. There are no CSS 
styles to format the appearance of the placeholder but all major browsers include their 
own browser extensions for placeholders. Depending on the browser, the placeholder is 
treated either as a pseudo-class or a pseudo-element named either input -placeholder 
for the webkit and ms extensions or placeholder for the moz extension. 

The following code shows a cross-browser style sheet that changes the text color of 
the placeholder text for every input box to light red. 


input::-webkit-input-placeholder { 
color: rgb(255, 151, 151); 


} 


input :-ms-input-placeholder { 
color: rgb(255, 151, 151); 


} 


input::-moz-placeholder { 
color: rgb(255, 151, 151); 


} 


Note that you cannot place different browser extensions within the same style rule 
because if style rule contains a selector that the browser doesn’t recognize, the entire 
rule will be ignored. 


Decision Making: Creating Cross-Browser Compatible Forms 


Several form attributes, such as the placeholder attribute, might not be supported 
by older browsers. This poses a problem for designers who must decide whether or 
not to use such attributes. One school of thought holds that a web form should look 
and function the same across all browsers and browser versions. Thus, a feature like 
the placeholder attribute should not be used. If a placeholder is needed, it should 
be created using a JavaScript program that can be applied uniformly across browsers 
and browser versions. The opposing view holds that the best design is one that uses 
each browser to its utmost capabilities, and that the web will only improve in the long 
run if the most current features are employed because their use will encourage their 
more rapid adoption across the browser market. 

To decide between these two approaches, you must evaluate whether the form 
feature you're adding is critical to understanding and using your web form. If it is, 
you need to include workarounds so that all users are supported regardless of their 
browser. On the other hand, if the feature enhances the user's experience but is not 
essential to working with the web form, it can be safely added without leaving older 
browsers behind. 
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You have finished the initial stage of developing the survey form. Alice is pleased with 
the form's appearance and content. In the next session, you will extend the form by adding 
new fields and controls, including calendar widgets, selection lists, option buttons, and 
check boxes. 


REVIEW 


Session 7.1 Quick Check 


1. 


What attribute do you add to the <form> element to access the CGI script at 
www.example.com/cgi-bin/registration? 

a. action="www.example.com/cgi-bin/registration" 

b. method="www.example.com/cgi-bin/registration" 

c. src="www.example.com/cgi-bin/registration" 

d. url="www.example.com/cgi-bin/registration" 


. What attribute identifies the form control? 


a. name 

b. id 

c. control 
d. method 


. What attribute do you use to indicate a password field? 


a. password="true" 
b. method="password" 
c. id="password" 

d. type="password" 


. What attribute do you use for an input box containing a telephone number? 


a. type="telephone" 
b. type="text" 

c. type="tel" 

d. type="number" 


. What attribute do you use for an input box containing a hypertext link? 


a. type="url" 
b. type="link" 
c. rel="link" 
d. type="search" 


. What attribute do you use to associate a label with the input control pWord? 


a. type="pWord" 
b. for="pWord" 
c. url="pWord" 
d. src="pWord" 


. What attribute do you use to set the default value of a field to "United States"? 


a. default="United States" 

b. text="United States" 

c. placeholder="United States" 
d. value="United States" 


. What code do you enter to specify the placeholder text "nnn-nn-nnnn"? 


a. default="nnn-nn-nnnn" 

b. text="nnn-nn-nnnn" 

c. placeholder="nnn-nn-nnnn" 
d. value="nnn-nn-nnnn" 
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Session 7.2 Visual Overview: 


The multiple attribute 


The select element The size attribute allows for multiple 
creates a drop-down sets the number of selections from the 
list box control. visible options. drop-down list. 


«label for="infoSrc">Where did you heyr about us?</labe 
<select name="infoSrc" id="info" size="5" multiple> 


[| = value="internet">Internet</option> 
<option value="mag">Hagazine</option> Thre Ginecidnore Gata 


; " " 
Each option in a selection option value="news">Newspaper</option> type creates a 
list is marked with the <option value="word">Word of Mouth</option> checkbox control. 
option element. <option value="other">Other</option 

</select> 


<input name="mailMe” id="mailCB” value="yes” type 
<label for="mailCB">Add me to your mailing List.</label> 


*chec kbox" 


«label for="orderType">Order type</label> 
«select name="orderType" id="order"> 
<option value="order1">Carry out</option> 
option value="order2">Deliver y</option 
<option value="order3" S@lBeteds0ine in</option> 
<option value="order4">Take j'n bake</option> 
The selected attribute </select> 
identifies the default 
option in a selection list. <labeloWas your service friendly?</label> 
SSeS es <fieldset class="optGroup"> 
<label for="fYes">Yes</label> 


Each radio button within name="sFriend” id="fYes" value="yes" type="radio" 
an option group belongs fice for="fNo">No</ label 
to the same data field. hame="sFriend” id="fNo" value="no" type="radio" 


</fieldset> 
The textarea element : 
marks a text area box <label for= “commBox">Tell us more about your experience! </ label» 
control. -—»<textarea name="custExp" id="commBox"></textarea 


The radio data type 
creates an option 
button control. 
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Web Form Widgets 


Customer Survey 


Thank you for taking our customer survey. Your response helps Red Ball Pizza maintain the tradition 
that has made us the top-rated pizzeria in the metro area. All participants are automatically entered 
into a monthly drawing to receive a Red Bail Express PizzaFest containing two large pizzas, a 2-liter 
soda, and a side order of chicken wings. Check your e-mail inbox for contest results. 


Surveys are private and confidential. Red Ball Pizza will not share your contact information with third 
parties, ever. 


Selection list displayed as a 
drop-down list box control with 


Required values are marked by an asterisk (*) herderubicpuon displayed 


Customer Informatior -. + Share Your Experience at Red Ball PiZZa | geese 


. a 
a 


The user can select 
only one option 
button control. 


A check mark appears Selection list box control The user can type 
when the user clicks showing five items; the in the text area 
the checkbox control. user can select more than box control. 


one option. 
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Entering Date and Time Values 


To ensure that users enter data in the correct format, you can use controls specifically 
designed for the field’s data type. Consider, for example, the following code that creates 
an input box for a birthdate field: 


<label for="bdate">Date of Birth</label> 
<input name="bdate" id="bdate" /> 


There is nothing to prevent users from entering the same date in a wide variety of 
formats such as September 14, 2021, 9/14/21, or 2021-09-14. The lack of uniformity in 
these date formats makes it difficult for a web server program to store and analyze the 
data. 

Starting with HTML 5, date and time fields could be indicated using one of the 


Tea reneeneeeenen following type attributes: date, time, datetime-local, month, and week. Each of 


support date and time these type attribute values has a different control associated with it, enabling the user 
controls, it will display an to select the date, time, month, or week value. The text into the input box is based on 
input box, leaving the user__—_ the user's selection in the control widget, ensuring the date or time text is entered in 
Uae Re the same format for every user. Figure 7-25 shows examples of the widgets used by the 


time value in whatever 


format he or she wishes. Google Chrome browser. 


Figure 7-25 Date and time controls 


(88/17/2021 x > ¥| [es /17/2022 04:21 PM x vi 
August 2021 ~ «|fe|f> August 2021 + @|fe][> 
Sun Mon Tue Wed Thu Fri Sat Sun Mon Tue Wed Thu Fri Sat 
1 2 3 4 5 6 7 1 2 3 4 5 6 7 
8 9 10 #11 72 #13 «#114 8 9 10 11 12 #13 «#14 
15 16 7 11% 19 20 21 15 1 7 11% 19 20 21 
22 23 24 25 26 27 28 22 23 24 25 26 27 28 
29 30 «(34 29 30 «31 ————_ 
4:21 PMx> 
type="date" type="datetime-local" type="time" 
|August 2627 x¢v) Week 33, 2027 x4 v/| 
August 2021 + alle lly August 2021 + MiP 
Sun Mon Tue Wed Thu Fri Sat Week | Sun Mon Tue Wed Thu Fri Sat 
4 2 3 4 5 6 7 31 1 2 3 4 5 6 7 
8 a 0 11 12 #13 14 32 8 9 10 #11 12 #13 «#14 
5 6 #7 4: 19 #2 21 33 15 16 7 4 19 20 24 
2 2 24 25: 2 27 BB 34 2 23 24 2 26 27 28 
23 3a 231 35 29 30 31 
type="month" type="week" 


The expInfo field set will contain fields in which the customer can describe his or 
her experience at the pizzeria. Alice wants the field set to include a calendar control 
that users can use to enter the date of their visit to Red Ball Pizza. 


Tutorial 7 Designing a Web Form | HTML 5 and CSS Wai ier y4 


To create a date field: 


D 1. If you took a break after the previous session, make sure rb_survey.html is 
open in your editor. 


BD 2. Go to the expinfo field set and insert the following label and input elements: 


<div class="formRow"> 

<label for="visit">Date of visit</label> 

<input name="visitDate" id="visit" type="date" /> 
</div> 


Figure 7-26 highlights the code for the label and input elements. 


Figure 7-26 Creating a date field 


fieldset id="expInfo" 


legend>Share Your Experiences at Red Ball Pizza</legend> 


<div class="formRow"> 
<label for="visit">Date of visit</label> 
<input name=“visitDate" id="visit" type="date”™ /> 
</div> 


& the data type of the 


/fieldset visitDate field to “date” 


BD 3. Save your changes to the file and then reload rb_survey.html in your browser. 


D 4. Click the Date of visit control and select a date to verify that the text of the 
date is entered into the input box. 


Creating a Selection List 


The next part of the survey form records how customers place their orders from Red 
Ball Pizza. A customer order can be placed in one of four ways: pickup, delivery, dine 
in, or, in the case of pizzas, uncooked pizzas that customers can take home and bake. 
Alice doesn’t want customers to enter their order types into an input box because 
customers will enter this information in different ways, and the large variety of spellings 
and text will make it difficult to group and analyze the survey results. Instead, she 
wants each user to select the order type from a predetermined group of options. This 
can be accomplished using a selection list. 

A selection list is a list box that presents users with a group of possible values for the 
data field and is created using the following select and option elements 


<select name="name"> 
<option value="valuel">text1</option> 
<option value="value2">text2</option> 


</select> 
where name is the name of the data field, value1, value2, and so on are the possible 
field values, and text1, text2, and so on are the text of the entries in the selection list 
that users see on the web form. Note that the field value does not have to match the 
option text. In most cases, the option text will be expansive and descriptive, while the 


corresponding field value will be brief and succinct for use with the server program 
analyzing the form data. 
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The first option in the selection list is selected by default and thus contains the field’s 
default value. To choose a different option as the default option, add the selected 
attribute to the option element as follows: 


<option value="value" selected>text</option> 


Note that XHTML documents require the attribute selected="selected" to be 
compliant with XHTML standards for attribute values. 


Creating a Selection List 
e To create a selection list, add the elements 


<select name="name"> 
<option value="valuel">textl</option> 
<option value="value2">text2</option> 


REFERENCE 


</select> 
where name is the name of the data field, value1, value2, and so on are the possible 
field values, and text 1, text2, and so on are the text entries displayed in the 
selection list on the web form. 

¢ To allow users to make multiple selections, add the attribute multiple to the select 
element. 

¢ To set the number of options displayed at one time in the selection list, add the 
following attribute to the select element 


size="value" 


where value is the number of options displayed in the selection list at any one time. 
¢ To specify the default value, add the selected attribute to the option element that 
you want to set as the default. 


Add a selection list to the Red Ball Pizza survey form to record the type of order 
placed by the customer, storing the value in the orderType field. Identify the selection 
list control with ID order. Alice knows that most of the survey respondents dine in 
at the restaurant. Although she wants the options for the orderType field listed in 
alphabetical order, she would like the Dine in option selected by default. 


To create a selection list: 
BD 1. Return to the rb_survey.html file in your editor. 


BD 2. Within the explnfo field set, add the following code to create the label and 


Thevdsiablawicivorme selection list: 


selection box is equal to 
; <div cl ="formRow"> 
the width of the longest e Soe 7 : 


option text unless the width <label for="order">Order type</label> 
is set using a CSS style. <select name="orderType" id="order"> 
<option value="orderl">Carry out</option> 
<option value="order2">Delivery</option> 
<option value="order3" selected>Dine in</option> 
<option value="order4">Take 'n bake</option> 
</select> 
</div> 


Figure 7-27 highlights the code for the selection list. 
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Figure 7-27 Creating a selection list for the orderType field 


<div class="formRow"> 

<label for="Visit">Date of visit</label> 

<input name="visitDate" id="visit" type="date" /> 
</div> 


field name id of the selection 
associated with 


the selection list 


list control 


<div class="formRow"} order3 (Dine in) is the 
<label for="ordery>Order typey/label> default selected value 
<select name="orderType" id="order"> of the orderType field 
<option value="order1">Carify out</option 
<option value="order2">Delwery</option> 
<option value="order3" selected>Dine in</option> 
<option value="order4">Take 'n bake</option> 


</select> 
possible values </div> 
of the orderlype text strings displayed in the 
field selection list for each option 


BD 3. Save your changes to the file and then reload rb_survey.html in your browser. 


BD 4. Click the Order type selection list and verify that the list of order types 
appears in the drop-down list box and that Dine in is the default selected 
option. See Figure 7-28. 


Figure 7-28 Viewing the selection list options 


Share Your Experience at Red Ball Pizza 


calendar control 
for selecting the 


Date of visit mm/ dd /yyyy 


date of the 
Order type Dine in customer's visit 
eareer | Carry out 
Dine in is the Delivery 


Dine in 
[Taken bake: 


default selected 
option 


a drop-down 
list box displays 
the text of the 


four options 


Working with select Attributes 


By default, a selection list appears as a drop-down list box. To display a selection list as 
a scroll box with more than one option visible in the web form, add the following size 
attribute to the select element 


<select size="value"> ... </select> 


where value is the number of options that the selection list displays at one time. For 
example, a size value of 5 would display 5 items in the scroll box. 

The default behavior of the selection list is to allow only one selection from the list 
of options. To allow more than one item to be selected, add the following multiple 
attribute to the select element: 


<select multiple> ... </select> 
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| There are two ways for users to select multiple items from a selection list. For 


ee Ones noncontiguous selections, users can press and hold the Ctrl key (or the command key 

completing your form, you Ona Mac) while making the selections. For a contiguous selection, users can select the 

can include instructions on _ first item, press and hold the Shift key, and then select the last item in the range. This 

your page detailing how selects the two items, as well as all the items between them. 

ee eh nee ina iaa Alice has another selection list to add to the survey form, which will record how a 
customer heard about Red Ball Pizza. The survey presents the user with five options: 
Internet, Magazine, Newspaper, Word of Mouth, or Other. Alice wants the form to 
display all of the options, so you set the value of the size attribute to 5. She also wants 
customers to be able to select multiple options from the selection list. 


To apply the size and multiple attributes: 


BD 1. Return to the rb_survey.html file in your editor and go to the custInfo field 
set. 


DB 2. At the bottom of the field set, insert the following code: 


<div class="formRow"> 

<label for="info">Where did you hear about us? 

<br />(select all that apply) 

</label> 

<select name="infoSre" id="info" size="5" multiple> 
<option value="internet">Internet</option> 
<option value="mag">Magazine</option> 
<option value="news">Newspaper</option> 
<option value="word">Word of Mouth</option> 
<option value="other">Other</option> 

</select> 

</div> 


Figure 7-29 highlights the code for the selection list. 


Figure 7-29 Inserting a selection list for the infoSrc field 


displays 5 options 
in the selection list 


<div class="formRow" 
«label for="info" out us?<br />(select all that apply)</label> 
<select namen"infdsre" ids"info" size="5" multiple> 
<option values"internet">Internet</option» 
<option value="mag">Hagazine</option> 
<option value="ner ws" >Newspaper</option> : 
<option value=" ‘word">wWord of Mouth</option> make multiple 
<option value="other">0ther</option> selections 
</select> 

</div> 


allows the user to 
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BD 3. Save your changes and then reload rb_survey.html in your browser. Figure 
7-30 shows the infoSrc selection list box. 


Figure 7-30 Viewing the selection list for the infoSrc field 


E-mail* 


Where did you hear about us? _ Internet 
(select all that apply) Magazine 


Newspaper 
Word of Mouth 


all 5 options are 
displayed in the 
selection list 


D 4. Verify that you can now select multiple values for the infoSrc field by 
using the Ctrl+click, Command-+click, Shift+click keyboard and mouse 
combinations. 


If you use a multiple selection list in a form, be aware that the form sends a name/ 
value pair to the server for each option the user selects from the list. Verify that your 
server-based program can handle a single field with multiple values before using a 
multiple selection list. 


Grouping Selection Options 


In long selection lists, it can be difficult for users to locate a particular option value. 
You can organize selection list options by placing them in option groups using the 
optgroup element 


<select> 
<optgroup label="labeli"> 
<option>texti</option> 
<option>text2</option> 
</optgroup> 
<optgroup label="label2"> 
<option>text3</option> 
<option>text4</option> 
</optgroup> 
</select> 


where labeli, labe12, and so forth are the labels for the different groups of options. 
The text of the label appears in the selection list above each group of items but it is 
not a selectable item from the list. Figure 7-31 shows an example of a selection list in 
which the options are divided into two groups. 
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Grouping options in a selection list 


<label for="appetizers">Starter Menu</lLabel> 
<select name="meaL"> 
<optgroup Label="Appetizers"> 
<option value="sms">Spicy Mozzarella Sticks</option> 
<option value="pr">Pepperoni Rolls</option> 
<option value="tr'|>Toasted Ravioli</option> 
</optgroup> 
<optgroup Label="Salads"> 
<option value="'sms">Pasta Salad</option> 
<option value="tbs">Tuscan Bread Salad</option> 
<option value="pr">Caesar Salad</option> 
</optgroup> 
</select> 


option group labels 


Starter Menu 
Appetizers 
Spicy Mozzarella Sticks 
Pepperoni Rolls 
Toasted Ravioli 
Salads 
Pasta Salad 
Tuscan Bread Salad 


Caesar Salad 


The appearance of the option group label is determined by the browser. You can 
apply a style to an entire option group including its label, but there is no CSS style to 
change the appearance of the option group label alone. 


Hidden Fields 


Some fields have predefined values that do not require user input and are often not 
displayed within the web form. You create a hidden field by setting the value of the 
type attribute to hidden as follows: 


INSIGHT 


<input name="name" value="Vvalue" type="hidden" /> 


where name is the name of the data field and value is the value stored in the field. 
With a hidden field, both the field value and the input control are hidden from the 
user. Even though hidden fields are not displayed by browsers, the field values still 
can be read by examining the source code; for this reason, you should not put any 
sensitive information in a hidden field. 


To show that a group of 
radio buttons are associated 
with the same field, place 
the radio button controls 
within a field set. 
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Creating Option Buttons 


Option buttons, also called radio buttons, are like selection lists in that they limit fields 
to a set of possible values; but, unlike selection lists, the options appear as separate 
controls in the web form. Option buttons are created with a group of input elements 
with a type attribute value of “radio”, sharing a common data field name as follows 


<input name="name" value="valuel" type="radio" /> 
<input name="name" value="value2" type="radio" /> 
<input name="name" value="value3" type="radio" /> 


where name is the name of the data field and value1, value2, value3, and so on are 
the field values associated with each option. While a user can select multiple items in 
a selection list, a user can only click or check one option in a group of radio buttons. 
Selecting one radio button automatically deselects the others and sets the value of the 
field to the value of the checked radio button. 

For example, the following code creates a group of option buttons for the sFriend 
field, limiting the possible field values to “yes” or “no”. 


Was your service friendly? 

<label for="fYes">Yes</label> 

<input name="sFriend" value="yes" id="fYes" type="radio" /> 
<label for="fYes">No</label> 

<input name="sFriend" value="no" id="£No" type="radio" /> 


Note that the two radio button controls are given different ids and field values to 
distinguish them from each other, however they share the same field name, “sFriend”. 

By default, an option button is unselected; however, you can set an option button 
to be selected as the default by adding the following checked attribute to the input 
element: 


<input name="name" type="radio" checked /> 


REFERENCE 


Creating an Option List 


¢ To create a group of option buttons associated with the same field, add the input 
elements 


<input name="name" value="valuel" type="radio" /> 
<input name="name" value="value2" type="radio" /> 
<input name="name" value="value3" type="radio" /> 


where name is the name of the data field, and value1, value2, value3, andso on are 
the field values associated with each option. 
¢ To specify the default option, add the checked attribute to the input element. 


In the next part of the form, Alice wants to ask customers general questions about 
their experiences at the restaurant. She wants to know whether the service was friendly, 
whether orders were recorded correctly, and if the food was delivered hot. She suggests 
that you present these questions using radio buttons, placing each group of radio 
buttons within a fieldset element belonging to the optGroup class. 


HTML 554 
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To create a set of option buttons: 


D 1. Return to the rb_survey.html file in your editor and go to the explnfo field set. 


» 2. ES aS pi piel bee ie el caine eA 


D 3. Add the following group of radio buttons for the oCorrect field: 


<div class="formRow"> 


<label>Was your order correct?</label> 


<fieldset class="optGroup"> 
<label for="cYes">Yes</label> 
<input name="o0Correct" id="cYes" value="yes" 
type="radio" /> 
<label for="cNo">No</label> 
<input name="o0Correct" id="cNo" value="no" 
type="radio" /> 
</fieldset> 


</div> 


Finally, add the following group of radio buttons for the foodHot field: 


<div class="formRow"> 


<label>Was your food hot?</label> 


<fieldset 


class="optGroup"> 


<label for="hYes">Yes</label> 
<input name="foodHot" id="hYes" value="yes" 
type="radio" /> 
<label for="hNo">No</label> 
<input name="foodHot" id="hNo" value="no" 
type="radio" /> 
</fieldset> 


</div> 


Figure 7-32 highlights the code for the set of option buttons. 
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HTML 555 


options for the 
sFriend field 


Creating option groups for the sFriend, oCorrect, and foodHot fields 


options for the 
oCorrect field 


options for the 
foodHot field 


i Ay ayy label for the 
yarns option group 


" ", 42. 19 
adio 


radio button 
controls 


field value 


"hNo* e="no" ="radio" 


D 5. Save your changes to the file and then reload rb_survey.html in your browser. 
Figure 7-33 shows the appearance of the three groups of radio buttons in 
the survey form. 


Figure 7-33 Option buttons for the serve field 


option group 


labels 


Date of visit 


Order type 
Was your service friendly? 


Was your order correct? 


Was your food hot? 


Share Your Experience at Red Ball Pizza 


radio buttons 
for the sFriend 


mm/dd/yyyy field 
Dine in 
| Yes No | 
: radio buttons 
| Yes No for the oCorrect 
- field 
| Yes — No | 


radio buttons for 


the foodHot field 


D 6. Click the radio buttons with each option group and verify that if you select 
one radio button, the other button in that group is automatically deselected. 
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Creating Check Boxes 


Check boxes are designed for fields that record the presence or absence of an object 
or event. The check box control is created using the following input element with the 
type attribute set to “checkbox” 


<input name="name" value="value" type="checkbox" /> 


here the value attribute contains the value of the field when the check box is 
The default field value fora Checked, and the type attribute indicates that the input box is a check box. By 
check box control is “On”. default, the check box is not checked, however you can make a check box selected 
automatically by adding the checked attribute to the input element. 
For example, the following code creates a check box for the orderDone field, 
recording whether an order has been completed: 


<label for="orderCB">Order Completed</label> 
<input name="orderDone" id="orderCB" value="yes" type="checkbox" /> 


If the check box is selected by the customer, the browser will send a name/value pair 

of orderDone/yes to the script running on the web server when the form is submitted. A 
name/value pair is sent to the server only when the check box is checked by the user. If 
the control is not checked, then no name/value pair is sent when the form is submitted. 


Creating a Check Box 
e To create a check box, add the element 


<input name="name" value="value" type="checkbox" /> 


where type is the type of input control, name is the name of the data field, and value 
is the data field value if the check box is selected. 

¢ To specify that a check box is selected by default, add the checked attribute to the 
input element. 


REFERENCE 


Alice wants her survey form to include a check box that customers can select if they wish 
to be added to the pizzeria’s email list for specials and promotions. Add a check box for the 
mailMe field to the custlnfo field set now. 


To add a check box control: 


BD 1. Return to the rb_survey.html file in your editor and go to the end of the 
custInfo field set. 


BD 2. Add the following code to create a check box followed by the label for the 
checkbox control: 


<input name="mailMe" id="mailCB" value="yes" type="checkbox" /> 
<label for="mailCB">Add me to your mailing list for great 
coupons and specials!</label> 


Figure 7-34 highlights the code for the check box and label. 
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Figure 7-34 Creating a checkbox control 


id for the checkbox 
element 


field value if the display a checkbox 
check box is checked control 


<input name="mailMe" id="mailCB" value="yes" type="checkbox" /> 
<label for="mailCB">Add me to your mailing List for great coupons and specials! 
</label> 


check box label 
1elaset 


field name 


BD 3. Save your changes and then reload rb_survey.html in your browser. 
Figure 7-35 shows the placement of the check box within the form. 


E-mail* 

Where did you hear about us? Internet 

{select all that apply) Magazine 
|Newspaper 
| Word of Mouth 
Other 


Add me to your mailing list for great coupons and specials! 


label associated 
with the check box 


Tab Indexing and Autofocus 


Typically, users navigate through a form using the Tab key, which moves the insertion point 
from one field to another in the order that the form controls are entered into the HTML file. 
You can specify an alternate order by adding the tabindex attribute to any control 

in your form. When each control is assigned a tab index number, the insertion point 
moves through the fields from the lowest index number to the highest. For example, to 
assign the tab index number 1 to the custName field from the survey form, you add the 
following tabindex attribute to the control: 


INSIGHT 


<input name="custName" tabindex="1" /> 


This code places the insertion point in the custName field when the form is first 
opened. (Fields with 0 or negative tab indexes are omitted from the tab order entirely.) 

Another way to place the insertion point in a field when the form is initially opened is 
to use the following autofocus attribute: 


<input name="custName" autofocus /> 


Older browsers that do not support tab indexing or the autofocus attribute simply 
ignore them and open a file without giving the focus to any form control. When a user 
tabs through the form in those older browsers, the tab order will reflect the order of 
the elements in the HTML file. 
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When you enter more 
text than can fit into a 
text area box, the browser 
automatically adds vertical 
scroll bars to the box. 


Creating a Text Area Box 


Input boxes are limited to a single line of text and thus are not appropriate for extended 
text strings that might cover several lines of content. For that type of data entry, you 
create a text area box using the following textarea element 


<textarea name="name"> 
text 
</textarea> 


where text is the default value of the data field. You do not have to specify a default value; 
you can leave the text box empty or you can use the placeholder attribute introduced in 
the last session to provide a hint to users about what to enter into the text box. 

The default browser style is to create a text area box that is about 20 characters 
wide and two or three lines high. You can increase the size of the box using CSS styles. 
HTML also supports the following rows and cols attributes to set the text area size 


<textarea rows="value" cols="value"> ... </textarea> 


where the rows attribute specifies the number of lines in the text area box and the 
cols attribute specifies the number of characters per line. While the rows and cols 
attributes represent the older standard, you may still encounter their use in older 
websites. 

Content in a text area box automatically wraps to a new line as needed. You can 
determine whether those line returns are included as part of the field value by adding 
the following wrap attribute: 


<textarea wrap="type"> ... </textarea> 


where type is either hard or soft. In a hard wrap, line returns are included with the 
data field value, while in a soft wrap, line returns are not included. The default value of 
the wrap attribute is soft. 


REFERENCE 


Creating a Text Area Box 


¢ To create a text area box for multiple lines of text, use 
<textarea name="name"> 
Bee 
</textarea> 


where name is the name of the field associated with the text area box and text is the 
default text that appears in the box. 
¢ To specify the dimensions of the box, use a CSS style or apply the following attributes 


rows="value" cols="value" 


where the rows attribute specifies the number of lines in the text area box and the 
cols attribute specifies the number of characters per line. 
° To specify how the field value should handle wrapped text, use the attribute 


wrap="type" 


where type is either hard (to include the locations of the line wraps) or soft (to 
ignore line wrap locations). 


Alice wants to include a text area box where customers can enter extended 
commentary about the pizzeria, storing their comments in the custExp field. You will 
set the dimensions of the text area box using CSS. 
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To add a text area box: 


BD 1. Return to the rb_survey.html file in your editor and go to the end of the 
explnfo field set. 


BD 2. Add the following code to create a text area box at the bottom of the 
field set: 


<label for="commBox">Tell us more about your 
experience!</label> 
<textarea name="custExp" id="commBox"></textarea> 


Figure 7-36 highlights the code for the text area box and label. 


Figure 7-36 Creating a text area box 


displays a text «label for="commBox">Tell us more about your experience!</label> 
Bas oe <textarea name="custExp" id="commBox"></textarea> 
fieldset id of the text 


BD 3. Save your changes and then return to the rb_forms.css file in your editor. 


BD 4. Go to the Text Area Styles section and insert the following style rule to set 
the size and top margin of the text area box. 


textarea { 
margin-top: 10px; 
height: 100px; 
width: 95%; 


} 


Figure 7-37 shows the style rule for the text area box. 


Styles for the text area box 


. 
“ 


BD 5. Save your changes and then reload rb_survey.html in your browser. 
Figure 7-38 shows the appearance of the text area box. 


NN Beet =HTML 5 and CSS | Tutorial 7 Designing a Web Form 


Text area box in the web form 


Figure 7-38 


label associated with 
the text area box 


Was your food hot? 


Tell us more about your ex 


S 


D 6. Test the text area box by clicking it and then typing a sample comment inside 


of the box. 
py 


Written Communication: Creating Effective Forms 


Web forms are one of the main ways of getting feedback from your users, so it is 
important for the forms to be easily accessible. A well-designed form often can be the 
difference between a new customer and a disgruntled user who leaves your site to go 
elsewhere. Here are some tips to remember when designing a form: 


PROSKILLS 


¢ Keep your forms short and to the point. 

¢ Mark fields that are required but also limit their number. Don’t overwhelm your users 
with requests for information that is not really essential. 

e Use the autofocus attribute to place users automatically into the first field of your 
form, rather than forcing them to click that field. 

e Many users will navigate through your form using the Tab key. Make sure that your 
tab order is logical and easy for users to follow. 

e Provide detailed instructions about what users are expected to do. Don’t assume 
that your form is self-explanatory. 

e If you ask for personal data and financial information, provide clear assurances that 
the data will be secure. If possible, provide a link to a web page describing your 
security practices. 

e If you need to collect a lot of information, break the form into manageable sections 
spread out over several pages. Allow users to easily move backward and forward 
through the form without losing data. Provide information to users indicating where 
they are as they progress through your pages. 

¢ Clearly indicate what users will receive once a form is submitted, and provide 
feedback on the website and through email that tells them when their data has been 
successfully submitted. 


Finally, every form should undergo usability testing before it is made available 
to the general public. Weed out any mistakes and difficulties before your users see 
the form. 


Tutorial 7 Designing a Web Form | HTML 5 and CSS Wabuh/\ ier 


You have greatly extended the scope of the survey form through the use of a 
calendar control, selection lists, option button groups, a check box, and a text area 
box. In the next session, you will continue to work on the survey form by exploring 
how to design a form that verifies the user enters valid data before it is submitted to the 
web server for processing. 


REVIEW 


Session 7.2 Quick Check 


1. What code do you enter to create a date control for the expireDate field? 
a. <input name="expireDate" date /> 
b. <input name="expireDate" type="date" /> 
c. <input name="expireDate" src="date" /> 
d. <input name="expireDate" method="date" /> 
2. What code do you enter to create a date/time control for the orderDelivery 
field? 
a. <input name="orderDelivery” date-time /> 
b. <input name="orderDelivery” type="datetime-local” /> 
c. <input name="orderDelivery” type="date/time” /> 
d. <input name="orderDelivery" type="date-time" /> 
3. What HTML elements are used to create a selection list? 
a. <select><li /><li />..</select> 
b. <select><item /s<item />...</selects 
c. <list><item /><item /> .. </list> 
d. <select><option /><option /> .. </select> 
4. What HTML elements are used to group option buttons? 
a. <group><option /><option /> ... </group> 
b. <optgroup><item /><item /> .. </optgroup> 
Cc. <optgroup><option /><option /> .. </optgroup> 
d. <group><item /><item /> .. </group> 
5. What HTML element do you use to create an option button control? 
a. <input type="option" /> 
b. <option /> 
Cc. <input type="radio" /> 
d. <radio type="option" /> 
6. What HTML element do you use to create a checkbox control? 
a. <input type="check" /> 
b. <input type="checkbox" /> 
c. <check /> 
d. <option type="check" /> 
7. What HTML element do you use to create a text box control? 
a. <text> .. </text> 
b. <input type="text" /> 
c. <textarea> .. </textarea> 
d. <input type="textarea" /> 
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Session 7.3 Visual Overview: 


The required attribute 
indicates that a field 
value is required. 


<Label for="name">Name *</lLabel> 
<input name="custName" id="name" type="text" required /> 


Sin a el ae ae 
The pattern attribute label for="phone">Phone number</label 
specifies the general pattern <input name="custPhone" id="phone" type="tel" 


that the characters in the He pattern="4\d{10}$/*(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" /> 
(ise value must follow. 


——oOoO 7 <label for="dineSpin">How often do you dine out per month? </lLabel> 
The min and max attributes <input name="dineOut" id="dineSpin" type="number" 
define the range of possible value="1" §tep="1" min="6" max="20" /> 
= 


field values; the step sets 
the interval between values. 


<label for="dish">What's your favorite dish?</label> 

<input name="favDish" id="dish" type="text" List="dishType" /> 
<datalist id="dishType"> 

<option value="Big Kahuna Pizza" /> 
<option value="BBQ Chicken Pizza" /> 
<option value="Pasta Rolls" /> 

<option value="Pasto Artichoke Pizza" /> 
</datalist> 


The number data type 
creates a spin box 
control for data entry. 


The datalist element 
defines a set of suggested 
field values. 


<label for="rangeBox">Rate the overall service at Red Ball<br /> 
(@=poor; 10=great)</label> 

8 <input name="serviceRate" id="rangeBox" type="range" 
value="5" step="1" min="1" max="10" /> 106 


‘ ' 


The submit data type 
creates a button to submit 
the form for processing. 


<input fype="submit™ value="Submit My Survey" /> 
<input type="reset” value="Cancel" / 


The reset data type creates The range data type 
a button that restores the creates a range slider 
form to its default values. for data entry. 
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Data Validation 


A spinner control is used to select a field 
value by clicking spin arrows to increase 
or decrease the value by a set amount. 


istomer Survey 


(AiceNictos 


| The favDish field displays 
a suggested value from 


the dishType data list. 


A range slider control is used to 
select a field value by dragging 
a slider across a range of values. 


Use inline validation to 
highlight invalid data as it 
is being entered by the 
user. 


8 Please match the 
requested format. 


Forms that contain invalid 
data generate error 
messages when submitted 
by the browser for 
processing. 


Submit My Survey 


The Cancel button is used to 
reset form fields to their default 
values, deleting any user input. 


The Submit My Survey button 


is used to submit the form to 
the server for processing. 
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Entering Numeric Data 


In the last session, you worked with several form controls that restricted field values 
to a set of possible values, ensuring that the user submits valid data to the server for 
processing. HTML also supports restrictions on numeric values by specifying that the 
values must fall within a defined range. 


Creating a Spinner Control 


One way of restricting numeric values is through a spinner control, which displays an 
up or down arrow to increase or decrease the field value by a set amount. To create a 
spinner control, apply the following input element using the number data type: 


<input name="name" id="id" type="number" 
value="value" step="value" min="value" max="value" /> 


where the value attribute provides the default field value, the step attribute indicates 
the amount by which the field value changes when a user clicks the spin arrow, the 
min attribute defines the minimum possible value, and the max attribute defines the 
maximum possible value of the field. For example, the following input element creates 
a spinner control with the ID attSpin for the attendance field with the spinner value 
ranging from 10 to 50 in steps of 5 units with a default value of 20: 


<input name="attendance" id="attSpin" type="number" 
value="20" step="5" min="10" max="50" /> 


Add a new field to the survey form named dineOut that queries customers about 
how often they dine out, setting its default value to 1 and allowing the field value to 
range from 0 up to 20 in steps of 1 unit. 


To add a spinner control: 


D 1. If you took a break after the previous session, make sure rb_survey.html is 
open in your editor and scroll down to the custInfo field set. 


BD 2. Above the check box for the mailMe field, insert the following code to create 
a spinner control for the dineOut field: 


<div class="formRow"> 
<label for="dineSpin">How many times do you dine out per 
month?</label> 
<input name="dineOut" id="dineSpin" type="number" 
value="1" step="1" min="0" max="20" /> 
</div> 


Figure 7-39 highlights the code for the spinner control and label. 
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Figure 7-39 Creating a spinner control for the dineOut field 
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BD 3. Save your changes to the file. 


A spinner control does not need to be as wide as the input boxes used for 
text entries. So, next, you will create a style rule that sets the width of the 
spinner control. 


D 4. Return to the rb_forms.css file in your editor and scroll down to the Spinner 
Styles section. 


D 5. Enter the following style rule for input elements with the number data type: 


div.formRow > input#dineSpin { 
flex: 0 0 50px; 
} 


Figure 7-40 highlights the new style rule in the style sheet. 


Figure 7-40 Styles for the dineSpin spinner control 


iv. formRow > t#dineSpin { 
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BD 6. Save your changes to the style sheet and then reload rb_survey.html in 
your browser. Figure 7-41 shows the layout and appearance of the spinner 
control. 
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Figure 7-41 Spinner in the web form 
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Trouble? At the time of this writing, some browsers (such as IE and Edge) do 
not support the number data type and they also ignore the step, min, and 
max attributes. In those browsers, the spinner control is displayed as a text 
input box. 


D7. Click the input box for the spinner control and verify that you use the arrow 
buttons to increase and decrease the field value within the range 0 to 20. 


Creating a Range Slider 


Another way to limit a numeric field to a range of possible values is through a slider 
control, which the user can use to drag a marker horizontally across the possible field 
values. Slider controls are created by applying the range data type in the following 
input element 


<input name="name" id="id" type="range" 
value="value" step="value" min="Vvalue" max="value" /> 


where the value, step, min, and max attributes have the same meanings as they did for 
the spinner control. Many browsers do not include a scale on the range slider widget, 
so it is a good idea to include the lower and upper values of the range before and 

after the slider control. For example, the following code creates a range slider for the 
attendance field with values range from 10 to 50 in steps of 5 and a default value of 20. 


10 

<input name="attendance" id="attSlider" type="range" 
value="20" step="5" min="10" max="50" /> 

50 


REFERENCE 
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Creating Spinner Controls and Range Sliders 


¢ To create a spinner control for numeric data, enter the input element with a type 
value of “number” 


<input name="name" id="id" type="number" 
value="Vvalue" step="value" min="value" max="value" /> 


where the value attribute provides the default field value, the step attribute indicates 
the amount by which the field value changes when a user clicks the spin arrow, the min 
attribute defines the minimum value, and the max attribute defines the maximum value 
of the field. 

¢ To create a range slider control for numeric data, use the following input element 
with a type value of “range”: 


<input name="name" id="id" type="range" 
value="Vvalue" step="Vvalue" min="Vvalue" max="value" /> 


Add a range slider to the survey form now, which customers can use to rate their 
experience at Red Ball Pizza from 0 (poor) up to 10 (great). 


To add a range slider control: 


BD 1. Return to the rb_survey.html file in your editor and scroll down to the 
explinfo field set. 


BD 2. Directly above the text area control, add the following code to create a range 
slider control for the serviceRate field: 


<div class="formRow"> 
<label for="rangeBox">Rate the overall service<br /> 
(O=poor; 10=great) </label> 
0 
<input name="serviceRate" id="rangeBox" type="range" 
value="5" step="1" min="0" max="10" /> 
10 
</div> 


Figure 7-42 highlights the code for the range slider control and label. 
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Figure 7—42 Creating a range slider control for the serviceRate field 
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BD 3. Save your changes to the file and then reload rb_survey.html in your browser. 
Figure 7-43 shows the appearance of the range slider control in the Google 
Chrome browser. 


Figure 7-43 Viewing the range slider control 
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Trouble? Other browsers will display different styles for the range slider 
widget. For example, Microsoft Edge and Internet Explorer will display 

a colored bar with a pop-up window showing the current value of the 
serviceRate field. If your browser does not support the range slider widget, it 
will display a text input box. 


D 4. Verify that you can drag the marker on the range slider to the left and right. 


When applied to the range 
type, a data list appears 

as tick marks in the range 
slider widget. 


INSIGHT 
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Styles for Widgets 


The appearance of a form widget is largely determined by the browser and there 
are no CSS styles to alter it. However, most browsers do provide style extensions 
that allow you to modify their widgets. One useful browser extension is the following 
appearance extension that defines the widget associated with the form control 


-moz-appearance: type; 
-webkit-appearance: type; 


where type is the type of widget including none (for no widget), button, checkbox, 
listbox, radio, range, spinner, textfield, and many other types depending on 
the browser. For example, to display a selection list as an input box, you would apply 
the following style rule: 


select { 
-moz-appearance: textfield; 
-webkit-appearance: textfield; 


} 


The selection list options will still appear but as pop-ups for the input box. You should 
use these browser extensions with care because they are not part of the CSS standard, 
and thus respond unpredictably. 


The next data field that Alice wants added to the survey form is a text box, which 
customers can use to indicate their favorite Red Ball Pizza dish. There are a lot of 
possible answers and Alice doesn’t want to limit the options to a selection list, but she 
does want to provide suggestions to customers as they type their entries. You can add 
these suggestions with a data list. 


Suggesting Options with Data Lists 


A data list is a list of possible data values that a form field can have. When applied to 
an input box, the data values appear as a pop-up list of suggested values. Data lists are 
defined using the following datalist element 


<datalist id="id"> 
<option value="value"> 
<option value="value"> 


</datalist> 


where the value assigned to the different option elements provides the suggested entry 
in the list for its associated option element. To apply a data list, add the following 
list attribute to the input element 


<input list="id" /> 


where id references the id of the datalist element. For example, to create an input box 
for the favDish field that offers a few suggested items, you could enter the following code: 


<input name="favDish" type="text" list="dishes" /> 
<datalist id="dishes"> 

<option value="Antipasto Pizza"> 

<option value="Big Kahuna Pizza"> 

<option value="BBQ Chicken Pizza"> 
</datalist> 
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The options in the dishes data list are just suggestions. The customer is not obligated 
to accept any options and can type a dish of his or her own choosing. 


Creating and Applying a Data List 
° To create a data list of possible values, enter 


=<Calealel sitemeacl er cities 
<option value="value"> 
<option value="value"> 


REFERENCE 


</datalist> 


where each value attribute provides the text of a possible value in the data list. 
e To reference the data list from an input control, add the list attribute 


<input name="name" list="id" /> 


where id references the ID of the data list structure. 


Add an input box for the favDish field to the survey form now and augment it with a 
data list of suggested Red Ball Pizza dishes. 


To apply a data list to an input control: 


BD 1. Return to the rb_survey.html file in your editor and go to the custInfo field 
set. 


D 2. Directly above the div element that encloses the spinner control for the 
dineOut field, enter the following code to create the input box for the 
favDish field along with the field's data list of suggested values. 


<div class="formRow"> 
<label for="dish">What's your favorite dish?</label> 
<input name="favDish" id="dish" type="text" list="dishType" 
/> 
<datalist id="dishType"> 
<option value="Anitpasto Pizza"> 
<option value="Big Kahuna Pizza"> 
<option value="BBQ Chicken Pizza"> 
<option value="Mediterranean Herb Pizza"> 
<option value="Pasta Rolls"> 
<option value="Pasto Artichoke Pizza"> 
</datalist> 
</div> 


Figure 7-44 highlights the code for the input box and data list. 
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BD 3. Save your changes to the file and reload rb_survey.html in your browser. 


D4. Click the input box for the favDish field and type the letter p. Note that the 
browser displays the list of dishes that start with the letter “p”. See Figure 7-45. 


Figure 7-45 Viewing suggested data values 
Where did you hear about us? Internet 
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Trouble? Currently the Firefox and Chrome browsers will display any data 
list entry that contains the letter “p” as opposed to only those data list values 
starting with the letter “p”. 


Now that you have entered most of the survey form fields, you will examine how to 
submit the form for processing. To do that, you will create a form button. 
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Working with Form Buttons 


So far, all of your form controls have been used to enter field values. Another type of 
control is one that performs an action. This is usually done with form buttons, which 
can perform the following actions: 


e Run a command from a program linked to the web form. 
¢ Submit the form to a program running on the web server. 
¢ Reset the form fields to their default values. 


The first type of button you will examine is the command button. 


Creating a Command Button 


A command button is a button that runs a program, which affects the content of the 
page or the actions of the browser. Command buttons are created using the following 
input element with the type attribute set to button 


<input value="text" onclick="script" type="button" /> 


where text is the text that appears on the button and script is the name of the 
program or the program code that is run when the button is clicked by the user. For 
example, the following input element creates a command button containing the text 
“Run Program”, which runs the setup() program when the button is clicked: 


<input value="Run Program" onclick="setup()" type="button" /> 


There is no need to use command buttons in the Red Ball Pizza survey form. 


Creating Submit and Reset Buttons 


The two other kinds of form buttons are submit and reset buttons. A submit button 
submits the form to the server for processing when clicked. A reset button resets 
the form, changing all fields to their original default values and deleting any field 
values that the user might have entered. Submit and reset buttons are created using 
the following input elements with the type attribute set to “submit” and “reset” 
respectively 


<input value="text" type="submit" /> 
<input value="text" type="reset" /> 


where once again text is the text string that appears on the button. 


REFERENCE 


Creating Form Buttons 
¢ To create a form button to run a command, use 
<input value="text" onclick="program" type="button" /> 


where text is the text that appears on the button and program is the program that is 
run in response to the user clicking the button. 
To create a form button to submit the form and its fields and values to a script, use 


<input value="text" type="submit" /> 
¢ To create a form button to reset the form to its default values and appearance, use 


<input value="text" type="reset" /> 


Alice wants the survey form to include both a submit button and a reset button. The 
submit button, which she wants labeled “Submit My Survey”, will send the form data 
to the server for processing when clicked. The reset button, which she wants labeled 
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“Cancel”, will erase the user's input and reset the fields to their default values. Add 
these two buttons at the bottom of the form within a div element with the ID buttons. 


To create submit and reset buttons: 


BD 1. Return to the rb_survey.html file in your editor and scroll down to the 
closing </form> tag. 


D 2. Directly above the closing </form> tag, insert the following code: 


<div id="buttons"> 
<input type="submit" value="Submit My Survey" /> 
<input type="reset" value="Cancel" /> 

</div> 


Figure 7-46 highlights the code to create the submit and reset buttons. 


Figure 7-46 Creating submit and reset buttons 
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BD 3. Save your changes to the file. 


Next, you will format the appearance of the div element and the two buttons 
it contains. 


D 4. Return to the rb_forms.ess file in your editor and go to the Form Button 
Styles section. 


D 5. Add the following style rule to set the width of the div element to 100% and 
to horizontally center its content. 


div#buttons { 
text-align: center; 
width: 100%; 


} 


BD 6. Add the following style rule to set the font size, padding, and margins for all 
submit and reset buttons in the page. 


input [type='submit'], input[type='reset'] { 
font-size: 1.2em; 
padding: 5px; 
margin: 15px; 


} 


Figure 7-47 shows the style rules for the form buttons on the page. 
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Figure 7-47 Styles for the form buttons 
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D 7. Save your changes to the file and then reload rb_survey.html in your browser. 
Figure 7-48 shows the layout and content of the completed web form. 


Completed design and layout of the survey form 
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D 8. Enter some sample data into the form and then click the Cancel button 
to test the actions of your reset button. Verify that the form is reset to its 
initial state and the data fields return to their default values. You will test the 
actions of the submit button shortly. 


Designing a Custom Button 


The appearance of a command, submit, and reset button is determined by the browser. 
While you can modify some basic properties such as the button border, font, or 
background color, you can’t add clipart graphics or other features. For more control 
over a button’s appearance use the following button element 


<button type="text"> 
content 
</button> 


where the type attribute specifies the button type (submit, reset, or button—for 
creating a command button) and content are HTML elements placed within the 
button, including formatted text, inline images, and other design elements supported 
by HTML. For example, the following code demonstrates how an inline image and text 
marked as a paragraph can be nested within a submit button. 


<button type="submit"> 


<img src="orderImg.png" alt="" /> 
<p>Place your order now</p> 
</button> 


You do not need a custom button in the survey form. 


Validating a Web Form 


The most important part of form design is ensuring that users enter reasonable values 
in the correct format. Part of this is accomplished through the use of form controls, 
such as option buttons and selection lists, which limit the user to a set of pre-approved 
values. However, there are other data fields that do not easily fit into those types of 
input controls. For example, how can you ensure that the user has entered a valid 
credit card number or an email address in the proper format? 

The process of ensuring that the user has supplied valid data is called validation and 


eT eae can take place on the web server where it is known as server-side validation or within 


validation by adding the the user’s own browser where it is referred to as client-side validation. Whenever 
attribute novalidate to possible, you should supplement server-side validation with client-side validation to 
UNS eer IMIATE reduce the server’s workload. In a payment form, you should verify that the customer 


correctly completed all of the fields before submitting the data to the server so that the 
server does not have to deal with an improperly completed form. 


Identifying Required Values 


The first validation test you should perform is to verify that data has been supplied for 
all required data fields. To identify those fields that are required (as opposed to those 
that are optional), add the required attribute to the control. For example, the following 
code specifies that the custName field is required and cannot be left blank by the user: 


<input name="custName" required /> 


In the same way, the required attribute can be added to the select element or the 
textarea box to make those data fields required. However, for a select element to be 
required, the first option in the selection list must have empty value or no text content. 
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If a required field is left blank in an input or textarea box, the browser will not submit 
the form but will return an error message instead, indicating that the required data field 
has not been filled out. If no option is chosen from a required selection list, the browser 
will once again return an error message. 

For the Red Ball Pizza survey form, Alice wants every customer to enter a name and 
an email address, so she asks you to make the custName and custEmail fields required. 


To create submit and reset buttons: 
BD 1. Return to the rb_survey.html file in your editor. 


BD 2. Add the attribute required to the input element for both the custName and 
custEmail fields. 


Figure 7-49 highlights the newly added required attribute. 


Figure 7-49 Making custName and custEmail required fields 
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BD 3. Save your changes to the file and then reload rb_survey.html in your browser. 


BD 4. Test your form by clicking the Submit My Survey button without entering 
any values into the form itself. As shown in Figure 7-50, the browser fails to 
submit the form and instead displays a bubble containing the message that 
the custName field needs to be filled out. 


Figure 7-50 Validation error message in Google Chrome 
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Trouble? Figure 7-50 shows the error message rendered using the Google 
Chrome browser. The exact text and format of the validation bubble will vary 
from one browser to the next. 
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D 5. Enter your name into the custName field and then resubmit the form 
(without entering an email address). Verify that the custName field now 
passes validation but a bubble with a validation error message appears next 
to the blank email box. 


D 6. Enter your email address into the custEmail field and then resubmit the 
form. Verify that the browser displays an alert message indicating that no 
invalid data have been detected. 


BD 7. Click the OK button to dismiss the dialog box. 


The dialog box you encountered in Step 6 is not part of HTML or your browser. It 
was generated from the rb_formsubmit.js script file that you linked the web page to in 
Session 1. The confirmation dialog box only appears when no validation errors have 
been detected in the submitted form. Also, note that all of your data values have been 
preserved in the survey form. This is also a feature of the script file to avoid re-typing 
field values as you continue to test the web form. If you want to clear the form to see 
the default values, reopen the file in your browser. 


Validating Based on Data Type 


A form will fail the validation test if the data values entered into a field do not match 
the field type. For example, a data field with the number type will be rejected if non- 
numeric data is entered. Similarly, fields marked using the email and url types will 
be rejected if a user provides an invalid email address or text that does not match the 
format of a URL. 

You have already specified data types for the survey form fields. Verify that the form 
will not accept invalid data for the custEmail field. 


To verify the form does not accept invalid data: 


D1. Click the input box for the custEmail field in the survey form and type the text 
Alice Nichols (or any text string that does not represent an email address). 


D2. Click the Submit My Survey button to submit the form. 


As shown in Figure 7-51, the browser rejects the form based on the invalid 
data entered for the custEmail field. 
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Figure 7-51 Rejecting an invalid email address 
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BD 3. Change the field value to alice.nichols@example.com and resubmit the 
form. Verify that the form now passes the validation test. 


D4. Click the OK button to close the JavaScript dialog box. 


Accepting the email address does not mean that the email address is real; it only 
means that the text field value follows the proper general pattern for email addresses, 
which is a string of characters with no blank spaces followed by the @ symbol and then 
followed by another string of nonblank characters. For validation tests that involve 
more complicated text patterns, you can do a pattern test. 


Testing for a Valid Pattern 


To test whether a field value follows a valid pattern of characters, you can test the 
character string against a regular expression. A regular expression or regex is a concise 
description of a character pattern. It is beyond the scope of this tutorial to discuss the 
syntax of regular expressions, but to validate a text value against a regular expression, 
add the following pattern attribute to the input element 


pattern="regex" 


where regex is the regular expression pattern. For example, the following code tests the 
value of the custZip field against the regular expression pattern *\d{5}$ 


<input name="custZip" pattern="*\d{5}s" /> 


where the regular expression *\d{5}$ represents any string of 5 numeric characters. 
Thus, the value 85017 would match this regular expression, but values like 850177 or 
X8514 would not. Regular expressions are based on a rich language and can be written 
to match credit card numbers, phone numbers, email addresses, and so forth. 
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Validating Field Values 


¢ To indicate that a field is required, add the required attribute to the form control. 
¢ To validate an email address, set the data type to email. 

¢ To validate a web address, set the data type to url. 

° To validate that a text input box follows a character pattern, add the attribute 


REFERENCE 


pattern="regex" 


where regex is a regular expression that defines the character pattern. 


Alice has obtained regular expressions for phone numbers and 5- or 9-digit postal 
codes. Add the pattern attribute now to the custZip and custPhone fields to validate 
those field values. Note that some regular expressions are long and complicated, and 
you must type them exactly as written. If you make a mistake, you can copy the text of 
the regular expressions from the rb_regex.txt file in the tutorial.07/tutorial folder. 


To test a field value against a regular expression: 


BD 1. Return to the rb_survey.html file in your editor and scroll down to the input 
element for the custZip field. 


BD 2. Add the following attribute to create a regular expression that matches 5- 
and 9-digit zip codes to the input element: 


pattern="*\d{5}(-\d{4}) 2$" 
BD 3. Go to the input element for the custPhone field and add the following 


attribute to create a regular expression that matches phone numbers with or 
without an area code: 


pattern="*\d{10}$|*(\ (\d{3}\) \s*) ?\d{3} [\s-]?\d{4}$" 


Figure 7-52 highlights the pattern attribute for both the custZip and 
custPhone fields. 


Figure 7-52 Pattern matching with regular expressions 


av class="formRow" 


Label for="zip">Postal code abe | 
put ame="“custZip” id="Zip" type="text” ¢ saceholder="nnnnn nann)” 


pattern="4\d{5}(-\d{4})7$" 


regular expression 
pattern that matches 
5- or 9-digit postal F Lass="formRow" 

codes Label for="phone">Phone numbse abel 

put name="custPhone" id="phone” type="“tel" placeholder="(nnn) nnn-nnnn"* 


yt € 
pattern="4\d{16}$|*(\(\d{3}\)\s*)?\d{3} [\s-]? 


regular expression pattern 
that matches phone numbers 


with or without area codes 
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BD 4. Save your changes to the file and then reload rb_survey.html in your browser. 


D 5. Enter your email address in the input box for the custEmail field so that the 
two required fields have a value. 


D 6. Type 321 in the input box for the postal code and then submit the form. As 
shown in Figure 7-53, the browser rejects the field value because it does not 
match the pattern of either a 5-or 9-digit postal code. 


Rejecting an invalid postal code 


Customer Information Share Your Experier 


Name* Alice Nichols | Date of visit 


Street address | Order type 
(Ormond Beach | Was your service frig 
FL 


postal code does Et ee f 
not match either the sta : (321 = 


5- or 9-digit pattern phone number 


Was your order c 


ey Please match the requested 

Le format. 

Where did you hear about us? |Intemet 

(select all that apply) 'Magazine (O=poor; 10=great) 
|Newspaper 

Word of Mouth Fe ETS OUR: 
| Other ° 


E-mail* 


BD 7. Change the postal code value to 32175 and resubmit the form. Verify that 
the form now passes the validation test. 


D 8. Test the custPhone field by entering 5-7499 in the input box for the customer 
phone number and then submitting the form. Verify that the browser rejects 
the data as invalid. 


BD 9. Change the phone number to 555-7499 and resubmit the form, verifying 
that it now passes the validation test. 


Defining the Length of the Field Value 


Because older browsers might not support the pattern attribute, you can do a simple 
test based on character length using the following maxlength attribute 


maxlength="value" 


where value is the maximum number of characters in the field value. For example, 
the following input element limits the number of characters in the custZip field to 5, 
which means that field values with more than 5 characters will not be validated. 


<input name="custZip" maxlength="5" /> 


Note that the maxlength attribute does not distinguish between characters and digits. 
A user could enter the text string abcde as easily as 32775 and have the field values 
pass validation. 


INSIGHT 
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WebKit Styles for Validation Messages 


Like widgets, the appearance of the bubble containing the validation message 

is determined by the browser. There is no standard CSS style to format the error 
message but there are browser extensions that give you more control over the error 
message style. For Google Chrome, the validation message is organized into the 
following pseudo-elements selectors: 


e ::-webkit-validation-bubble: Selecting the entire bubble containing 
the validation message 

¢ ::-webkit-validation-bubble-arrow: Selecting the pointing arrow above 
the validation bubble 

e ::-webkit-validation-bubble-message: Selecting the validation message 
within the bubble 

e ::-webkit-validation-bubble-arrow-clipper: Selecting the bubble behind 
the top arrow 


To modify the appearance of the validation message, you can apply the following style 
rule, which displays the message in a gray font on an ivory background. 


::-webkit-validation-bubble-message { 
Gollkoies GCpeEhy5 
background: ivory; 


} 


Other browsers support their own collection of extensions to modify the appearance 
of the validation bubble. Because these are not part of the CSS standards, there is no 
common syntax yet for modifying the validation message. You can learn more about 
these extensions by viewing the documentation on the browser manufacturer's website. 


Applying Inline Validation 


One disadvantage with the validation tests you have applied is that they all occur after 
a user has completed and submitted the form. It is extremely annoying for the user to 
go back to an already completed form to fix an error. Studies have shown that users are 
less likely to make errors and can complete a form faster if they are informed of data 
entry errors as they occur. The technique of immediate data validation and reporting of 
errors is known as inline validation. 


Using the focus Pseudo-Class 


One way of integrating inline validation with a web form is to change the display style 
of fields that currently contain invalid data. This can be done using some of the pseudo- 
classes described in Figure 7-54. 


A Beet” §=HTML 5 and CSS | Tutorial 7 Designing a Web Form 


Figure 7-54 Pseudo-classes for form controls and fields 


Pseudo-Class Matches 

checked A check box or option button that is selected or checked 

default A default control, such as the default option in a selection list 

disabled A control that is disabled 

enabled A control that is enabled 

focus A control that has the focus (is actively selected) in the form 

indeterminate A check box or option button whose toggle states (checked or unchecked) 
cannot be determined 

in-range A field whose value lies within the allowed range (between the min and max 
attribute values) 

invalid A field whose value fails the validation test 

optional A field that is optional (not required) in the form 

out -of-range A field whose value lies outside the allowed range (outside the min and max 
attribute values) 

required A field that is required in the form 

valid A field whose value passes the validation test 


For example, to create styles for all of the checked option buttons in the form, you 
could apply the checked pseudo-class, as in the following style rule 


input [type="radio"] :checked { 
styles 
} 


where styles are the CSS styles applied to checked option buttons. Note that option 
buttons that are not checked will not receive these styles. 

The first pseudo-class you will apply to the survey form will be used to change the 
background color of any element that has the focus. Focus refers to the state in which 
an element has been clicked by the user, making it the active control on the form. You 
may have noticed that some browsers highlight or add a glowing border around input 
boxes that have the focus. 

Alice would like the input boxes, selection lists, and text area boxes that have the 
focus to be displayed with a light green background color. 


To create style rules for elements that have the focus: 


BD 1. Return to the rb_forms.ess file in your editor and scroll down to the 
Validation Styles section. 


BD 2. Add the following style rule to change the background color to light green 
for all input, select, and textarea elements that have the focus. 


input:focus, select:focus, textarea:focus { 
background-color: rgb(220, 255, 220); 
} 


Figure 7-55 highlights the style rule to change the background color. 
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Figure 7-55 Creating a style rule for the focus pseudo-class 


change the background 
color to light green when 
the control element has 
the focus 


input: focus, select: focus,ytextarea: focus { 
background-color: rgb(220, 255, 220); 
¥ 


BD 3. Save your changes to the file and then reload rb_survey.html in your browser. 


D4. Click the input box for the customer name and verify that the background 
color changes to a light green as shown in Figure 7-56. 


Figure 7-56 Text box with the focus 


background color changes 
to light green when the text 
input box has the focus 


Customer Information 


Name* 


Street address 
City Ormond Beach 


D 5. Press the Tab key repeatedly to change the focus to the remaining input 
controls. Verify the background color changes to light green when an input 
control has the focus and has a background. 


Pseudo-Classes for Valid and Invalid Data 


The valid and invalid pseudo-classes are used to format controls based on whether 
their field values pass a validation test or not. For example, the following style rule 
displays all input elements containing invalid data with a light red background 


input:invalid { 
background-color: rgb(255, 232, 233); 


} 


while the following style rule displays all input elements containing valid data with a 
light green background: 


input:valid { 
background-color: rgb(220, 255, 220); 


} 


Both of these style rules set the background color whether the input element has 
the focus or not. Displaying a form full of input backgrounds with different background 
colors can be confusing and distracting to the user. As a result, it is better practice to 
highlight invalid field values only when those input controls have the focus, as in the 
following style rule that combines both the focus and invalid pseudo-classes: 


input:focus:invalid { 
background-color: rgb(255, 232, 233); 


} 
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Alice suggests that the form perform inline validation for the input boxes with IDs 
of “name”, “zip”, “phone”, and “mail”. For valid data, she wants those input boxes 
to be displayed with a light green background along with a green check mark image. 
For invalid data, she wants the background to be light red with a red X image. Use the 
rb_valid.png and rb_invalid.png image files for the green check mark and red X images. 


BD 1. Return to the rb_forms.css file in your editor and scroll to the bottom of the 
file. 


» 2. 


BD 3. Add the following style rule to display a light red background and a red X 


image when invalid data is entered in those same fields: 


input#name:focus:invalid, 
input#zip: focus:invalid, 
input#phone: focus:invalid, 
input#mail:focus:invalid { 
background: rgb(255, 232, 
right/contain no-repeat; 


} 


233) url(rb_ invalid.png) bottom 


Figure 7-57 highlights the style rules to style valid and invalid data. 


Figure 7-57 Creating styles for valid and invalid field values 


style for valid data » 


values in the 
selected fields that 
have the focus 


style for invalid 
data values in the 
selected fields that 
have the focus 


ut:f a elect: , textare 


display a green check 
mark image in the 
input box background 


it@name: focus: valid, 
. it#zip: focus:valid, 

inp utaphonet focus:valid,. 
inp utemail:focus:valid A ; 
background: rgb(22 8 55 220) url(rb_valid.png) bottom right/contain no-repeat; — 


display a red X image 
in the input box 
background 


input#name: focus: invalid, 

in nput#zip: focuszinvalid, 

Perteeen: :focus: invalid, 
putsmail:focustinvalid { 
backg round: rgb(255, 232, 23 3) url (rb_invalid. Pak) Genet right/contain no-repeat; 


BD 4. Save your changes to the style sheet and then reload rb_survey.html in your 


browser. 
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D5. Test inline validation by typing the zip code value 32175-6136 into the input 
box for the customer's zip code. Note that the input box provides immediate 
visual feedback on whether the current field value passes the validation test. 
See Figure 7-58. 


Figure 7-58 Inline validation on the customer postal code 
Aca _— mas the initial text string does 
Sedna = © not pass the validation test 


oa sy 
pieal bode Goive ® the S-digit postal code 
passes validation J 


entering more digits 


Postal code (32175-64] rx) causes the field value to 
once again fail validation ) 
i a ™ 
the final 9-digit postal code 
Postal code 32175-6134 ie ha 
value passes validation J 


BD 6. Continue to test the web form by entering data into the other input boxes, 
noting how the form automatically performs a validation test on your data 
values. 


O 
Q 
wy Problem Solving: Using Form Building Tools 
J 
= One of the limitations of CSS is that it does not provide an easy way to format the 
¢ form controls other than basic styles for text and background colors. To gain more 
o control over your form controls, you may want to explore third party frameworks that 
oe provide customized widgets and form design tools. Some popular frameworks include: 


© Google Forms (docs.google.com/forms): A free service for form design that also 
automatically tabulates the user responses in an online spreadsheet 

¢ Wufoo (wufoo.com): A paid service that supplies a powerful form builder engine and 
tools for uploading documents and images 

e Jotform (www.jotform.com): A paid service with form tools and the ability to 
automatically upload completed forms to your website 

¢ Form Stack (www.formstack.com): A paid service with form building software and 
tools to manage workflow, data analysis, and tabulation 


Form building tools can speed up the process of designing and testing your web 
forms. However, like all frameworks they are best used when you have a good 
understanding of the underlying HTML and CSS code that they employ. 
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You have finished your work on the survey form. Alice will place a copy of your files in a 
folder on the company’s web server and from there the form can continue to be tested to 
verify that the server program and the web form work well together. Alice is pleased with 


your work on this project and will get back to you to create other web forms for the Red Ball 
Pizza website. 


Session 7.3 Quick Check 


= 1. To create a spinner control that goes from 0 to 100 in steps of 10 with a default 
= value of 50, which of the following attributes would you not include in the 
2 <input /> tag? 

a. min = "0" 

b. max = "100" 

c. value = "50" 

d. type = "spinner" 

2. What attribute do you add to an <input /> tag to create a range slider? 

a. type = "range" 

b. type = "slider" 

c. control = "range" 

d. number = "slider" 


3. What attribute do you add to an <input /> tag to apply the data list "cityList' 
to the input box control? 


a. list = "cityList" 

b. data = "cityList" 

c. datalist = "cityList" 
d. values = "cityList" 


4. The code to create a submit button containing the text "Add Order" is: 
a. <input type="button">sAdd Order</input> 
b. <input type="button" value="Add Order" /> 
c. <input type="submit" value="Add Order" /> 
d. <input type="submit" label="Add Order" /> 


5. What attribute do you add to an input element to force the user to enter a value? 


a. type = "required" 
b. required 
c. type = "autocomplete" 


d. autocomplete 


6. What attribute do you add to an input element to validate the element's value 
against the regular expression ““\user\-d{4}$"? 
a. regular="*\user\-d{4}s" 
b. valid="*\user\-d{4}s" 
c. value="*\user\-d{4}s" 
d. pattern="*\user\-d{4}s" 

7. What selector do you use to match all input elements that have the focus? 
a. input:focus 
b. input#focus 
c. input :hasFocus 
d. input .hasFocus 

8. What is inline validation? 
a. Validation applied to inline elements 

b. Validation with the error message displayed inline with the text 

Cc. 


Validation that is applied immediately to the element prior to the form 
submission 


d. All of the above 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code7-1_txt.html, code7-1_forms.css, 
formsubmit.js 


CODE 


Use your knowledge of HTML form elements to create the user account login form 
shown in Figure 7-59. 


Coding Challenge 7-1 example page 
Enter User Account 


Enter Account Information 


Account Type 
administrator 
member 
guest 

Username 

John Doe 


Password 


seeeeeeereeee 


Login 


Do the following: 


1. Open the code7-1_txt.html file from the html07 » code folder. Enter your name and the date in 
the document and save it as code7-1.html. 

2. Go to the code7-1.html file in your editor. Within the head section insert a 1ink element linking 
the page to the code7-1_forms.css style sheet. Also insert a script element that opens the 
formsubmit.js JavaScript file for handling the form submissions. 

3. Within the body of the web page insert a form element with the value of the action attribute set 
to login-script.php and the method value set to post. 

4. Within the web form create a field set with the id login. Within the field set insert a legend with 
the text Enter Account Information. 

5. Within the field set insert a label containing the text Account Type. After the label add a selection 
list with the id acctype and the field name accounttype. Set the value of the size attribute of the 
selection list to 3 and add the following three options: administrator, member, and guest. Set the 
value of the three options to type1, type2, and type3 respectively. Link the label to the selection 
list using the for attribute with a value of acctype. 

6. Add label to the field set containing the text Username followed by a text input box with the id 
username and the field name user. Use the for attribute to link the label to the input box control. 

7. Add another label to the field set containing the text Password followed by a password input 
box with the id password and the field name pwd. Use the for attribute to link the label to the 
password input box. 
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8. Below the field set insert a submit button displaying the text Login. 

9. Save your changes to the file and then load code7-1.html in your browser. Verify that the layout 
of the table resembles that shown in Figure 7-59 and that when you click each label, the control 
associated with that label becomes selected. Further verify that clicking the Login button submits 
the form for processing. 

10. Submit the completed file to your instructor. 


Coding Challenge 2 
Data Files needed for this Coding Challenge: code7-2_txt.html, code7-2_forms.css 


You've been asked to create a survey web form for use in a seminar conference website. Some of the 
questions from the form are shown in Figure 7-60. Use your knowledge of HTML form elements to 
create the form elements and labels. 


Coding Challenge 7-2 example page 


Survey Questions 


CODE 


1. How satisfied were you with the conference workshops? 


a. Very Satisfied 
b. Satisfied 
c. Dissatisfied 
d. fery Dissatisfied 
2. How satisfied were you with the conference speakers? 
a. Very Satisfied 
b. Satisfied 
c. Dissatisfied 
d. fery Dissatisfied 
3. How satisfied were you with the conference facilities? 
a. fery Satisfied 
b. Satisfied 


c. Dissatisfied 
d. Very Dissatisfied 


4. How likely are you to attend next year's conference? 


very unlikely Ei very likely 


5. Provide any suggestions for the next conference: 


énter your suggestions here 


Do the following: 


1. Open the code7-2_txt.html file from the html07 » code2 folder. Enter your name and the date in 
the document and save the file as code7-2.html. 

2. Go to the code7-2.html file in your editor. Within the head section insert a link element linking 
the page to the code7-2_forms.css style sheet. 
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3. The survey questions are marked as an ordered list. The first three questions include a nested list 

of options. For the first question do the following: 

a. Mark the text from “Very Satisfied” to “Very Dissatisfied” as form labels. 

b. Before each label insert a radio button belonging to the q1 field with default values of a 
through d. Assign the radio button controls the ids qla through qd. 

c. Use the for attribute to associate each label with its radio button control. 

4. Repeat Step 3 for questions 2 and 3, naming the fields for those radio buttons q2 and q3 
respectively and assigning the radio button controls the ids q2a through q2d for the second 
question and q3a through q3d for the third question. 

5. Within the div element with the id newRow insert a range slider that ranges from 1 to 10 in 
steps of 1, with a default value of 5. Insert the text very unlikely before the range slider and the 
text very likely after the range slider. Assign the range slider the field name q4. 

6. Mark the text “Provide any suggestions for the next conference” as a form label and use the for 
attribute to attach the label to the input control with the id q5text. 

7. Below the label in Step 6, insert a textarea control with the id q5text and the field name q5. Add 
the placeholder text enter your suggestions here. 

8. Enclose the list of questions within opening and closing <form> tags. Give the form the action 
submit-survey.php using the post method. 

9. Save your changes to the file and then reload code7-2.html in your browser. Verify that the layout 
of form matches that shown in Figure 7-60. 

10. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code6-7_txt.html, code7-3_valid_txt.css, 
code7-3_forms.css, formsubmit.js 


CODE 


You've been asked to complete a web form containing credit card payment information. Part of your 
task will be to include validation test to ensure that required data is entered correctly into the form. 
Figure 7-61 shows the completed form. 


Coding Challenge 7-3 example page 


Payment Information 


Visa 
Name 
Coding Challenges 


Card Number 


412345678901 


July (07) v| |2023 


CSC 
555 


Submit Payment | 
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Do the following: 


1. Open the code7-3_txt.html and code7-3_valid_txt.css files from the html07 » code3 folder. 
Enter your name and the date in each document and save the files as code7-3.html and 
code7-3_valid.css respectively. 

2. Go to the code7-3.html file in your editor. Within the head section insert 1ink elements linking 
the page to the code7-3_forms.css and code7-3_valid.css files. Insert a script element to load 
the formsubmit.js JavaScript file. 

3. Within the creditcard selection list add the following options and values: Credit Card Type (leave 
the value as an empty text string), American Express (value="amex"), Discover (value="disc"), 
MasterCard (value="master"), and Visa (value="visa"). Make the selection list required. 

4. Make the cardname field required. 

5. Make the cardnumber field required and add the regular expression pattern indicated in the 
comment section of the HTML file to help ensure that a valid card number is used. 


6. Within the cardmonth selection list add options for each month starting with the text Month and 
a value of a blank text string followed by the option text January (01) through December (12) 
with the corresponding values 01 through 12. Make the selection list required. 

7. Within the cardyear selection list add options for each year starting with the text Year and a value 
of a blank text string followed by the option text 2020 through 2024 with the corresponding 
values 2020 through 2024. 

8. Make the cardcsc field required with a maximum character length of 3 characters following the 
regular expression pattern “\d{3}$ . 

9. Save your changes and then go to the code7-3_valid.css file in your editor. Add the following 
style rules to the file: 

a. Display any input or select element that has the focus with a yellow background color. 
b. Display any input element with invalid data in a red font, surrounded by a red border, and red 
box shadows that are offset 0 pixels horizontally and vertically with a shadow blur of 5 pixels. 

10. Save your changes to the file and then view the page in your browser to verify the contents 
match than shown in Figure 7-61. 

11. Test your payment form by trying to submit the form data with missing values or with incorrect 
values. Attempt to submit the form using the invalid credit card number 412345678901 and then 
with the valid card number 4123456789012. 

12. Submit the completed file to your instructor. 


. Coding Challenge 4 


Data Files needed for this Coding Challenge: code7-4_txt.html, code7-4_forms.css 


You have been given the HTML code for a proposed web form shown in Figure 7-62. Unfortunately, 
there are several syntax errors in the HTML code. You've been asked to find and correct all errors so 
that the page passes validation. 


DEBUG 
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HTML 591 


Contact Information 


First Name 
‘Calley 

Last Name 
Jones 
Student ID 
juw-32001 


Year 
Sophomore 
Residence Hall 


Westside 3 


ee ——————EEs 


Submit 


Do the following: 


1 


. Open the code7-4_txt.html file from the html07 » code4 folder. Enter your name and the date in 


each document and save the file as code7-4.html. 


. Go to the code7-4.html file in your editor. Within the head section insert a Link element linking 


the page to the code7-4_forms.css. Save your changes to the file. 


. Run the code7-4.html file in a validator of your choosing. Locate and fix the errors in the page so 


that the file passes validation with no errors or warnings. Note that some of the same errors are 
repeated multiple times throughout the HTML code. 


. Open the code7-4.html file in your browser to confirm that it resembles the page shown in 


Figure 7-62. 


. Submit the completed file to your instructor. 


HTML 592 


PRACTICE 
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Review Assignments 


Data Files needed for the Review Assignments: rb_build_txt.html, rb_customer_txt.html, 
rb_validate_txt.css, 3 CSS files, 1 JavaScript file, 10 PNG files, 1 TXT file 


Alice wants you to start work on an online order form for customers to place orders through the Red 
Ball Pizza website. The form will span several pages in which customers will specify whether the 
order is for pickup or delivery and will indicate the toppings they want on their pizza(s). Figure 7-63 
shows a preview of the form customers will use to indicate their delivery option (including an 
address or pickup and at what time they want their order). 


Figure 7-63 Red Ball Pizza form for Customer Data 


Customer Information 


Thank you for using our online ordering form for quick and easy orders. Please enter your name and phone 
number and whether you want to place an order for delivery or pickup. oe that sa api values are marked by 
an asterisk (*). If you want to place your order over the phone, call us at ( 555-7499 


Name* Abc Nichots Y 
Phone* (385) 554-7499 
* Delivery Pickup 


S12 Seach Or 
Orwend Seach, Fi 


Alice has already written some of the HTML code for the web pages and designed many of the style 
sheets. Your job will be to write the code for the form elements and validation styles. 


Complete the following: 


1. Use your HTML editor to open the rb_customer_txt.html, rb_build_txt.html, and 
rb_validate_txt.css files from the html07 » review folder. Enter your name and the date 
in the comment section of each file, and save them as rb_customer.html, rb_build.html and 
rb_validate.css respectively. 

2. Return to the rb_customer.html file in your editor. Within the document head, insert links to the 
rb_forms2.css and rb_validate.css files. 

3. Still within the document head, use the script element to link the file to the rb_formsubmit2 js file. 

4. Scroll down to the section element and, directly after the initial paragraph, insert a form 
element that employs the action at the fictional address http://www. example.com/redbal1 
/customer using the post method. 

5. Within the form element, insert a div element that encloses a label with the text Name* 
associated with the nameBox control. Also, within the div element, add an input text box 
with the ID nameBox, field name custName, and placeholder text First and Last Name. Make 
custName a required field. 

6. Create a second div element in the web form that encloses a label with the text Phone* 
associated with the phoneBox control. Within the div element, add an input box with the ID 
phoneBox, field name custPhone, and placeholder text (nnn) nnn-nnnn. Make custPhone a 


10. 


We 


IZ. 


3. 
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required field and have any text entry follow the regular expression pattern 
A\ d{10}$ | 4(\(\d{3}\)\s*)?\d{3}[\s-]2\d{4}$. (Note: You can copy the regular expression 
code from the rb_regex2.txt file.) 


. Add another div element to the web form containing the following code: 


a. Insert an input element to create an option button for the orderType field with the ID 
delivery. Make the option button checked by default. After the option button, insert a label 
associated with the delivery control containing the text Delivery. 

b. Add an input element to create a second option button for the orderType field with the ID 
pickup, followed by a label associated with the pickup control containing the text Pickup. 


. Next within the form, create a field set with the ID deliveryInfo. Within this field set, add the 


following: 

a. A legend containing the text Delivery Options. 

b. A text area box with the ID addressBox and field name of delAddress containing the 
placeholder text Enter delivery address. 

c. A label containing the text Delivery Time (leave blank for earliest delivery) associated with 
the delBox control. 

d. Add an input element with the ID delBox and field name delTime for storing delivery time 
values. Use a data type of “time” for the control. 


. Next within the web form, create a field set with the ID pickupInfo containing the following 


information for pickup orders: 

a. A legend containing the text Pickup Options. 

b. A label containing the text Pickup Time (leave blank for earliest pickup) associated with the 
pickupBox control. 

c. Add an input element with the ID pickupBox and field name pickupTime for storing time 
values. Add the disabled attribute to the tag to disable this control when the form is initially 
opened. Use a data type of "time" for the control. 

Finally, within the form, add a div element containing a submit button displaying the text Begin 

Building your Order. 

Save your changes to the file and then go to the rb_validate.css file in your editor to add 

validation styles for the web form. 

Within the Validation Styles section, add the following style rules: 

a. A rule that displays input, select, and textarea elements that have the focus with a 
background color of rgb(255, 255, 180). 

b. A rule that displays the nameBox and phoneBox controls that have the focus and contain 
valid data with a background color of rgb(220, 255, 220) and the background image file 
rb_okay.png at the right with no tiling contained within the background. 

c. A rule that displays the nameBox and phoneBox controls that have the focus and invalid data 
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with a background color of rgb(255, 230, 230) and the background image file rb_warning.png 


at the right with no tiling contained within the background. 


Save your changes to the style sheet and then open the rb_customer.html file in your browser. 
Verify the following: 


a. The content and the layout of the form resemble the form shown in Figure 7-63. 


b. If you submit the form by clicking the Begin Building your Own button with no customer 
name or phone number, the browser warns you of the missing values. 


c. As you enter text into the custName field, the input box background changes to show that the 


field value is valid. 


d. When you enter a phone number into the custPhone field, the input box provides inline 
validation to indicate whether a valid phone number has been entered. 


e. When you click the submit button for a successfully completed form, the browser displays the 


alert message that the form data passes the initial validation test. 


(Note: The script file used with this web page is written to enable only either the delivery 
option or the pickup option but not both.) 
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Next, you will create a form that customers will use to build their customized pizzas. A preview of the 
form is shown in Figure 7-64. 


Figure 7-64 Red Ball Pizza form to Build a Pizza 


Build your Pizza 


Everyone has their own pizza preferences. Build your special pizza by selecting from the ingredients below. You 
can divide your pizza into two regions to give your friends a wide choice of toppings and flavors 


Quantity 2 


= 


Pizza Size 


Pizza Crust Pe oY 
Double Cheese # Double Sauce 


Add to your Order 


14. Return to the rb_build.html file in your editor. Insert a link to the rb_forms2.css file and add a 
script element to link the file to the rb_formsubmit2 js file. 

15. Scroll down to the section element, insert a form element below the paragraph element that 
employs the action at the fictional address http: //www. example. com/redbal1/build using 
the post method. 

16. Within the form element, add a div element containing a label with the text Quantity associated 
with the quantityBox control. Add a spinner control with the ID quantityBox and the field name 
pizzaQuantity. Have the value of the field range from 1 to 10 with a default value of 1. 

17. Add a div element that displays images of the pizza sizes, containing the following: 

a. The inline image rb_sizes.png. 

b. The label Pizza Size associated with the sizeBox control. 

c. A range slider with the ID sizeBox and the field name pizzaSize ranging from 10 to 16 in 
steps of 2 with a default value of 14. 

18. Add a div element that provides the selection of pizza crusts containing the following: 

a. The label Pizza Crust associated with the crustBox control. 

b. A selection list for the pizzaCrust field with the ID crustBox and containing the following 
option values and text: Thin, Thick, Stuffed, and Pan. 

19. Add a div element containing a check box with the ID cheeseBox for the doubleCheese field 
followed by the label Double Cheese associated with the cheeseBox control. Then, add a second 
check box with the ID sauceBox for the doubleSauce field followed by the label Double Sauce 
also associated with that check box. 
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20. Customers can choose what to place on their pizzas. Create a field set containing the legend 
Meat Toppings. Add the following content to the field set. 
a. A div element containing the label Location but not associated with any form control. Next 
to the label, place the inline images rb_full.png, rb_left.png, rb_right.png, and rb_none.png 


with the alternate text “full”, “left”, “right”, and “none” used to graphically indicate where the 
meat ingredients should be placed on the pizza (on the full pie, the left side, the right side, or 
nowhere). 


b. A div element containing the label Pepperoni and followed by four option buttons belonging 
to the pepperoni field and with the values “full”, “left”, “right”, and “none”. Make “none” 
checked by default. 

c. Repeat Step b to insert div elements with the values used in Step b but associated with the 
ham, pork, sausage, and chicken fields. 

21. Using Figure 7-60 as your guide, repeat Step 20 to create a field set with the legend Vegetable 
Toppings, followed by div elements with the values used in Step 20 but associated with the 
mushrooms, green peppers, onions, tomatoes, and jalapenos fields. 

22. At the bottom of the form, add a div element containing a submit button with the text Add to 
your Order. 

23. Save your changes to the file and then open rb_build.html in your browser. Verify that the 
content and layout of the form resemble that shown in Figure 7-64. Verify that all of the form 
controls work as expected, that is, you can only select one location for each ingredient option at 
a time. 


APPLY 


Case Problem 1 


Data Files needed for this Case Problem: cg_register_txt.html, cg_validate_txt.css, 3 CSS files, 
1 JavaScript file, 4 PNG files, 1 TXT file 


ACGIP Conference Professor Darshan Banerjee is the project coordinator for the annual conference 
of the Association of Computer Graphics and Image Processing (ACG/P), which takes place this 

year in Sante Fe, New Mexico. Darshan has asked you to work on the conference's website, starting 
with the registration form for conference attendees. The initial form will collect contact information 
for people attending the conference. Figure 7-65 shows a preview of the form you will create for 
Darshan. 
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Figure 7-65 Registration form for the ACGIP Conference 


Computer Graphics 
and Image Processing 


12th Annual Conference, March 3 - March 7, Sante 


home page programs registration 
keynote address workshops travel info 
speakers accommodations ACGIP home page 
committees banquet tour Sante fe 
gener! session executive session family attractions links 


abstracts advisory council 


Conference Registration Form 
Required Item (*) 


Title Prof 
First Name* Darshan 
Last Name* Banvtye 
Address* 


Company or University University of Texa 
E-mail* harmijeegex ample 

Phone Number* 

ACGIP Membership ec gip-4 18031 v7 
Number 


Registration Category 


Association of Computer Graphics and Image Processing 


© IgorGolovniov/Shutterstock.com; © Jason Winter/Shutterstock.com 


Professor Banjerjee has already written the HTML code for the page and the styles for the form 
elements. He wants you to write the HTML code for the web form and the CSS validation styles. 
Complete the following: 


1. Using your editor, open the cg_register_txt.html and cg_validate_txt.css files from the 
html07 » casel folder. Enter your name and the date in the comment section of each file, and 
save them as cg_register.html and cg_validate.css respectively. 

2. Return to the cg_register.html file in your editor. Add a link to the cg_forms.css and cg_validate. 
css style sheet files to the document head. 

3. Add a script element to the document head that loads the cg_script.js file. 

4. Scroll down to the section element and insert a web form element that employs the action at 
http://www.example.com/cg/register via the post method. 

5. Add the labels, input controls, and textarea boxes shown in Figure 7-65 and described in 
Figure 7-66. Place the input boxes directly after the labels and associate each label with its form 
control. You do not need to enclose these elements within div elements. Note that the address 
field should be entered within a textarea box. 
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Figure 7-66 Fields and controls from the registration form 


Label Data Field ControlID Type Required Placeholder 
Title title titleBox text no 

First Name* firstName fnBox text yes 

Last Name* lastName InBox text yes 

Address* address addBox yes 

Company or University group groupBox text no 

E-mail* email mailBox email yes 

Phone Number* phoneNumber phoneBox tel yes (nnn) nnn-nnnn 
ACGIP Membership acgipID idBox text no acgip-nnnnnn 
Number 


6. Create a data list named titleList containing the suggestions: Mr., Mrs., Ms., Prof., Dr., Assist. 
Prof., and Assoc. Prof. Apply the titleList data list to the titleBox control. 

7. Apply the regular expression pattern “\d{10}$ | 4(\(\d{3}\) \s*)?\d{3}[\s-]?\d{4}$ to the 
phoneNumber field. Apply the regular expression pattern “acgip\-\d{6}$ to the acgipID field. 
(Note: You can copy the regular expression code for the phoneNumber field from the cg_regex. 
txt file.) 

8. Add the Registration Category label associated with the regList control. Add a selection list with 
the ID regList that stores values in the registerType field. Populate the selection list with the 
option text: “ACGIP Member ($695)”, “Non-Member ($795)”, “Student ($310)”, “Poster ($95)”, 
and “Guest ($35)”. Make the corresponding option values equal to “member”, “nonmember”, 
“student”, “poster”, and “guest”. 

9. Within the form, add a paragraph containing a submit button with the text continue. 

10. Save your changes to the file and return to the cg_validate.css file in your editor to create styles 
for validating data entry. 

11. Within the Validation Styles section, add the following style rules: 

a. Display all input, select, and textarea elements that have the focus with a background 
color of rgb(245, 245, 140). 

b. When the fnBox, InBox, mailBox, phoneBox, and idBox controls have the focus and are valid, 
change the background color to rgb(220, 255, 220) and display the cg_valid.png image with 
no tiling in the right side of the background contained within the box. 

c. When the fnBox, InBox, mailBox, phoneBox, and idBox controls have the focus and are not 
valid, change the background color to rgb(255, 232, 232) and display the image cg_invalid. 
png with no tiling in the right side of the background contained within the box. 

12. Save your changes to the style sheet and then open cg_register.html in your browser. Verify that 
the content and layout of the form resemble that shown in Figure 7-65. Verify that you must 
enter all required field values in the proper format for the form to be submitted successfully. 
Confirm that the browser performs inline validation on the firstName, lastName, address, email, 
phoneNumber, and acgipID fields. 
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Case Problem 2 


Data Files needed for this Case Problem: sb_payment_txt.html, sb_validate_txt.css, 3 CSS files, 
1 JavaScript file, 10 PNG files, 2 TXT files 


The Spice Bow! Rita Sato is the manager of the web development team for The Spice Bowl, an 
online grocery store specializing in gourmet spices. She has asked you to create web forms for the 
site. You will start your work by developing a payment form used to collect billing and credit data 
from the store’s customers. The form should include validation tests for credit card numbers to ensure 
that the card numbers match the correct credit card number patterns. The page should also include a 
form in which users can log into their Spice Bow! account. Figure 7-67 shows a preview of the page 
you will create for Rita. 


Figure 7-67 Payment form for The Spice Bowl 


CHALLENGE 


ansaed a 


Spices Recipes My Cart My Account Contact Us 


Payment Form 


Seo 252 


Salt Roasted Pecans 


First Name Res 
recent 
Last Name Sato ' The. butter, matted 
Street Accress 671 Pak St 1 1/4 tap. fine sew sult 
Street Adcres: Prabwat oven to 325". Toes 
bis pecans and butter togetive 
Port Pete add sam and toes again 
State Sprea a single Layer on 
= = sheet. Sake atx 
ZIP/Postal Code 30344 rinutes Cook en baking 
cheet 


Country United States 
Phone (404) 555-981! 


5 The. quick sat 
— tsp granulated garé 
. 2 tap. cracked pepper 
oe ee ee won lieeaae 
i Tis. iquid srnake 
Credit Card Number io 12123456789019 © aes Sead dn ee 
Expiration Date Jety (07) ¥|223 © a large Covered container f 


tiwee days. On third day 


csc 31 ape beef into sticks. and 


bake at 150* for 8 hour turn 


Popcorn Seasonings Spice Sets heckout 
Dip Mixes Mortar & Pesties wider History 


Bulk Spices Stupeng infec 


Tech Support 


Cher 


alts & Pepper 


© Natalia Klenova/Shutterstock.com; Sources: American Express Company; Discover Financial Services; 
MasterCard Inc.; Visa, Inc. 
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Complete the following: 


1. 


Using your editor, open the sb_payment_txt.html and sb_validate_txt.css files from the 
html07 » case2 folder. Enter your name and the date in the comment section of each file, and 
save them as sb_payment.html and sb_validate.css respectively. 


. Return to the sb_payment.htmll file in your editor. Add links to the sb_forms.css and sb_validate. 


css style sheet files to the document head. Add a script element to load the sb_script.js file. 


. The page will contain a form in which customers can log into their account. Directly after the 


sb_logo.png image, insert a form element with the ID login. Have the form use the action at 
http://www.example.com/sb/login via the post method. 


. Within the login form, insert the following fields and controls: 


a. A text input box with the ID userBox for the username field. Add the placeholder text 
username. 

b. A text input box with the ID pwdBox for the password field. Add the placeholder text 
password. 


. Next, insert a payment form. Directly below the Payment Form h1 header, insert a form element 


that employs action at http://www.example.com/sb/payment via the post method. Assign the 
web form the id payment. 


. Insert a field set with the id billing to the payment form. Add the legend Billing Information 


(required) to the field set. 


. Within the billing field set, add the labels and input boxes specified in Figure 7-68. Note that 


none of the input boxes contain placeholder text. You do not need to enclose the label or 
input elements within div elements. 
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Figure 7-68 Fields and controls from the payment form 


12, 


Label Data Field Control ID Data Type Required 
First Name fName firstBox text yes 
Last Name IName lastBox text yes 
Street Address street streetBox text yes 
Street Address (2) street2 streetBox2 text no 
City city cityBox text yes 
State state stateBox text yes 
ZIP/Postal Code zip zipBox text no 
Country country countryBox text yes 
Phone phone phoneBox tel yes 


. Create a data list with the ID stateList containing the two-letter abbreviations of all the states. 


(You can use the list of abbreviations in the sb_state.txt file.) Apply the data list to the stateBox 
input text box. 


. The text of the zip field should follow the “\d{5}(-\d{4})2$ regular expression pattern. The text of 


the phone field should follow the *\d{10}$ | 4(\(\d{3}\)\s*)?\d{3}[\s-]2\d{4}$ pattern. Note that 
both regular expression patterns can be found in the sb_regex.txt file. 


. Set the default value of the country field to United States. 
Wile 


Create a field set with the ID creditCard, which you use to insert credit card fields. Add the 
legend Credit Card (required). 

Within the creditCard field set, insert another field set containing four label elements, with each 
label element belonging to the cardLabel class. Within each of the four label elements, insert 
an option button from the cCard field with the value amex, discover, master, and visa. Make 
cCard a required field. Follow each option button with an image element containing the image 
of its corresponding credit card image using the sb_amex.png, sb_discover.png, sb_master.png, 
and sb_visa.png files. 
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14. 
5. 


16. 
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Explore 13. After the creditCard field set, insert a label containing the text Credit Card Number 
associated with the cardBox input control. Create an input text box with the ID cardBox for 
the cardNumber field. Make the field cardNumber required and have the field value follow the 
regular expression pattern for credit card numbers (using the regular expression in the sb_regex. 
txt file). 
Create the Expiration Date label associated with the monthList control. 
Add a selection list with the ID monthList for the cardMonth field. Make the cardMonth field 
required. Populate the selection list with the option text “--Month--”, “January (01)”, “February (02)” 
and so forth up to “December (12)”. For the “--Month--”, set the field value to an empty text 
string. For the month options, insert the month value from “01” up to “12”. 
Add a selection list with the ID yearList for the cardYear field. Make the cardYear field required. 
Populate the selection list with the option text “--Year--”, “2020”, “2021”, “2022”, “2023”, and 
“2024”. For the “--Year--”, set the field value to an empty text string and, for the year options, 
insert the 4-digit year value. 
Create a label with the text CSC associated with the cscBox. Add a text input box with the 
ID cscBox for the required esc field. Have the csc field value follow the regular expression 
pattern “\d{3}$. Set the maximum length of the field value to 3 characters and display the 
placeholder text nnn. 

Explore 18. After the creditCard field set, insert a button element of the submit type. Within the 
button, insert the sb_button.png inline image with the alternate text next. (Note: The text for the 
button is part of the button image, so the value attribute is not needed.) 

Save your changes to the file and then go to sb_validate.css file in your editor to design the 
validation styles for the web form. 


~y Explore 20. Within the Validation Styles section, insert the following style rules to perform inline 


ile 
Dae 
23. 


validation: 

a. For every input element that is not a radio type and that has the focus, change 
the background color to rgb(255, 218, 165). (Hint: Use the attribute selector 
input :not ( [type='radio']) to select input elements that are not radio types.) 

b. For every input element that is not a radio type and that has the focus with a valid value, 
change the background color to rgb(215, 255, 215) and display the image file sb_valid.png 
with no tiling in the right edge of the input box. 

c. For every input element that is not a radio type and that has the focus with an invalid value, 
change the background color to rgb(255, 245, 215) and display the image file sb_invalid.png 
with no tiling in the right edge of the input box. 

Save your changes to the style sheet and then open sb_payment.html in your browser. 

Verify that you cannot submit the form without all required fields entered in the proper format. 

Verify the validation checks for the credit card number by confirming that the form rejects 

the following credit card number 6012123456789019 (which does not follow a valid card 

number pattern). Further verify that the form accepts the following credit card number 

6011123456789019 (which follows a valid card number pattern). 


TUTORIAL 8 


OBJECTIVES 


Session 8.1 

e Understand audio and video 
formats 

e Insert an HTML audio clip 

¢ Support multiple audio formats 


Session 8.2 

¢ Insert an HTML video clip 
¢ Write a video caption track 
¢ Format video captions 


Session 8.3 

¢ Create a CSS transition 

¢ Explore transition attributes 

* Create a CSS key frame 
animation 

e Apply a CSS animation 


STARTING DATA FILES 


i 
Hi 
i 


cp_royal_txt.html 
cp_animate_txt.css 
cp_media_txt.css 
cp_captions_txt.vtt 


+ 11 files 


code8-2_txt.html 
code8-2_trans_txt.css 


+ 7 files 


ws_jfk_txt.html 


ws_media_txt.css 
ws_captions_txt.vtt 


+ 8 files 


Enhancing a 
Website with 


= 
_ 
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Multimedia 


Working with Sound, Video, and Animation 


Case | Cinema Penguin 


Maxine Michaels runs the movie blog Cinema Penguin containing 
reviews, articles, and stories about classic movies from the golden 
era of Hollywood. She wants to enhance the user experience of her 
website by adding sound and video clips of famous movie moments. 


Maxine has asked for your help to develop a sample page describing 
the 1951 classic movie musical Royal Wedding, starring Fred Astaire 
and Jane Powell. Maxine has collected audio and video clips from 
the movie that she wants added to the page. The page also includes 
a short article describing a famous piece of cinema trickery in which 
Astaire appears to dance on the ceiling. Maxine wants you to use 
CSS animation styles to demonstrate how this effect was achieved. 


cp_astaire_txt.html 
cp_animate2_txt.css 
cp_media2_txt.css 
cp_captions2_txt.vtt 
+ 9 files 


code8-3_txt.html 
code8-3_anim_txt.css 
+ 7 files 


paa_game_txt.html 
paa_animate_txt.css 
+ 10 files 


code8-1_txt.html 
code8-1_video_txt.css 
captions8-1_txt.vtt 

+ 3 files 


code8-4_txt.html 
code8-4_debug_txt.css 
+ 5 files 


demo_asym.html 
demo_cubic.html 
demo_delay.html 
demo_steps.html 
demo_timing.html 
demo_transition.html 
+ 9 files 


HTML 601 


Egy ~=HTML 5 and CSS | Tutorial 8 Enhancing a Website with Multimedia 


Session 8.1 Visual Overview: 


@ ; 

The audio element 
embeds an audio file 
in the web page. 


<aside> 


<h1l>Listen Up</h1> 
<p>The music for <cite>Royal Wedding</cite> was composed by Burton Lane, 


who is best known for his work in <cite>Finian's Rainbow </cite> (1947) 
and his Grammy Award-winning <cite>On a Clear Day You Can See 
Forever</cite> (1965).</p> 


<p>Lane's greatest musical accomplishment may 
very well be his discovery of an 11-year-old singing sensation named 


Frances Gumm, whom the world now knows better as Judy Garland. 

</p> 

<p>Click the play button below to hear the opening of the musical overture 
for Burton Lane's <cite>Royal Wedding</cite>.</p> The centrale atau 


<audio controls> displays media player 
<source src="cp_overture.mp3" type="audio/mp3" /> controls for the audio clip. 


<source src="cp_overture.ogg" type="audio/ogg" 
<p><em>To play this audio clip, your browser needs to support|HTML5.</em></p> 
</audio> 


</aside> 


The type attribute 
provides the format 
of the multimedia file. 


Browsers that do not support 
HTML5 multimedia elements 
will display this text as a fallback 
message to the user. 


The source element 
provides the source of 
the multimedia file. 
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Playing Web Audio 


Listen Up 


The music for Rova! Wedding was 
composed by Burton Lane, whe Is best 
known for his work in Ainian’s Rainbow 
(1947) and his Grammy Award-winning 
Ona Clear Day You Can See Forever 
(1965). 


Lane's greatest musical 
accomplishment may very well be his 
discovery of an 11-year-old singing 
sensation named Frances Gumm, whom 
the world now knows better as Judy 
Garland. 


Click Ehe play button below to hear the 
opening of the musical overture for 
Burton Lane's Royal Wedding. Audio player 


- controls are part 
_ of the browser's 
media player. 


. bP 000/032 o— of) 


‘Native media player 
provided by the browser 
- to play audio files. 
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Introducing Multimedia on the Web 


The original purpose of the web and HTML was to deliver textual information 
via interconnected hypertext documents. HTML was a perfect tool for academic 
researchers needing to share text and data. Once graphical capabilities were added 
to the HTML language, developers were free to create documents with images and 
arresting page layouts that opened up the web’s potential for commerce and business. 
The next major phase in the language was the introduction of multimedia support in 
the form of streaming audio, video, and interactive games, making the web a dominant 
entertainment platform. 

It is estimated that by 2022, online video will account for 82% of global 
Internet traffic, up from 75% in 2017 (Cisco Visual Networking Index: Forecast and 
Methodology, 2017-2022, February 2019). Thus, web developers need to consider how 
to best utilize multimedia in making their websites attractive to the public. One of the 
biggest challenges in delivering multimedia content is putting that content in a form 
that can be retrieved quickly and easily without loss of quality. 


Understanding Codecs and Containers 


To achieve fast and easy transmission of multimedia content, that content is stored 
using a codec, which is a computer program that encodes and decodes streams of data. 
Codecs compress data so that it can be transmitted in a fast and an efficient manner 
and then decompress it when it is to be read or played back. The compression method 
can be either lossy or lossless. 

Using lossy compression, nonessential data are removed in order to achieve a 
smaller file size. An audio file might be compressed by removing sounds that the 
human ear can barely hear. A video file might be compressed by removing frames 
from the video playback. The more the file is compressed, the more content is lost. 

The sound from a highly compressed audio file can become muddy and indistinct. 

A highly compressed video clip can become blurry or jerky in its movements. Thus, 
one consideration in lossy compression is determining at what point essential data has 
been removed because, once that data is lost, it cannot be recovered. 

Using lossless compression, data is compressed by removing redundant information. 
For example, the following text string, consisting of 4 As followed by 5 Bs, and then 
6 Cs requires 15 characters of information: 


AAAABBBBBCCCCCC 


Yet, this content can be rewritten using the following 6 characters with no loss of 
information: 


4A5B6C 


This same general technique can be applied to digital audio and video, which can 
contain long stretches of redundant sound and images. The disadvantage of lossless 
compression is that you cannot achieve the same level of compression as with lossy 
compression. Most codecs involve some combination of lossy and lossless techniques. 
Web developers can choose from dozens of different codecs to compress their 
multimedia content. 

Codecs are placed within a container that handles the packaging, transportation, 
and presentation of the data. The container is essentially the file format, which is 
identified by a file extension. The web supports a multitude of container and codec 
combinations but not all containers and codecs are equally supported. For example, 
Google Chrome uses the WebM container for video content, compressing that 
data with the VP8 codec; however, that combination of container and codec is not 
supported by any Apple device. 

Thus, web developers have to account for browser support before making any 
multimedia content available to the user. 
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Understanding Plug-Ins 


Once multimedia has been stored within a container file, a media player is required to 
decode and play that content. Because multimedia was not part of the original HTML 
specifications, browsers, for many years, used a plug-in, which is a software program 
accessed by the browser to provide a feature or capability not native to the browser. 
The most commonly used plug-ins for multimedia content included Adobe Flash, 
Apple’s QuickTime player, and the Windows Media Player. A plug-in either opens in its 
own external window or runs within the web page as an embedded object, in much 
the same way that a graphic image appears embedded within the page. 

There are several problems with the plug-in approach for delivery of multimedia 
content: 


e Plugs-ins require users to install a separate application in addition to their web 
browsers. 

¢ There is not a common plug-in that is available across all browsers, operating 
systems, and devices. 

e¢ HTML documents that support multiple plug-ins are difficult to create and maintain. 

e Plug-ins consume valuable system resources, resulting in slow and unreliable 
performance. 

e Plug-ins are a security risk with some of the most prominent Internet attacks working 
their way into browsers via a plug-in. 


Starting with HTML 5, support for audio and video content was added to the HTML 
language, providing a common framework for delivering multimedia content without 
the need for plug-ins. HTML 5 is now an accepted and well-supported standard, but 
if you need to work with older browsers or maintain a legacy website, you might still 
encounter code that utilizes plug-ins. In this tutorial, you review code to access those 
plug-ins but your focus will be on working with the HTML 5 audio and video elements 
and attributes. 

Before exploring these elements and attributes in depth, open the page for Cinema 
Penguin that Maxine has created for you. 


To open Maxine’s web page: 


D 1. Use your editor to open the cp_royal_txt.html file from the html08 » tutorial 
folder. Enter your name and the date in the comment section of the file and 
save it as cp_royal.html. 


BD 2. Review the rest of the document to become familiar with its contents and 
structure. 


BD 3. Open cp_royal.html in your browser. The initial page describing the movie 
Royal Wedding is shown in Figure 8-1. 
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movies actors directors genres find 


Video Clips 


Fred Astaire 
lane Powell 
Peter Lawford 
Keenan Wynn 
Sarah Churchill 
Stanley Donen 
Alon Mey Lerner 
Listen Up In Focus 


The music for 4 ) Wedding 5 Tr vgh polit g 7 is thre Wing P 
omposed by Burtt a Dance in whic taire appears Tv Schaal fe 


Nn Finen > Dow : { tits hoted mired 
; Grammy Award { eeming 
r Day You Can See F 


$ greatest musical 
accomplishment may very well be his 
Gescovery Of an Li-year-ol singing 
gansation named Frances Gurmwn, whoern 
the work! now knows better as Judy 


Gartond 


insert audio clip from 
the overture of Royal 
Wedding here 


insert video clip of the 
_ Ceiling Dance from 
Royal Wedding here 


Sources: openclipart.org; Archive.org 


Royal Wedding is one of the Metro-Goldwyn-Mayer productions from the early 
1950s whose original copyrights were never renewed, which places the movie in the 
public domain. Maxine can add production stills, sound clips, and video clips from the 
film to her website without worrying about copyright infringement. One of her audio 
clips contains the first few seconds from the film’s overture. She would like to add that 
clip to the Listen Up box in the lower-left corner of the web page. To do that, you use 
the audio element. 
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Working with the audio Element 
Audio clips are embedded within a web page using the following audio element: 
<audio src="url" attributes /> 


where url specifies the source of the audio file and attributes define how the audio 
clip should be handled by the browser. Figure 8—2 describes some of the attributes 
associated with HTML audio and video elements. 


Figure 8-2 Attributes of HTML audio and video elements 


Attribute Description 

autoplay Starts playing the media clip as soon as it is loaded by the 
browser 

controls Displays the player controls in the web page 

loop Automatically restarts the media clip when it is finished 
playing 

muted Specifies that the audio output should be muted 

preload="auto|metadata|none" Specifies whether the media clip should be preloaded by 


the browser, where auto preloads the entire clip, metadata 
preloads descriptive data about the clip, and none preloads 
nothing. metadata (to preload only descriptive data about 
the clip), or none (not to preload the media clip) 

sre="url" Specifies the source of the media clip, where url is the 
location and name of the media file 


For example, the following tag loads audio from the cp_overture.mp3 file and displays 
Because XHTML the media player controls, which allows the user to interact with the audio clip from 
requires values for every within the web page: 
attribute, enter the 
controls attribute as 
leita dei Pana naser tt If you don’t include a controls attribute, the audio clip is embedded within the 
fe ciee ay medi aie page but without the browser's native media player. This can be used to create a 
controls on a page written i 2 i 
in XHTML. soundtrack that automatically starts and plays in the background. The following tag uses 

the cp_overture.mp3 file as background music, automatically starting when the page is 

loaded and looping back to the beginning when the clip is finished: 


<audio src="cp_overture.mp3" controls /> 


<audio src="cp overture.mp3" autoplay loop /> 


Adding background sounds to a web page is generally discouraged because they 
can quickly become annoying with no easy way of turning them off! 


Browsers and Audio Formats 


HTML does not specify any particular audio format and thus developers are free to pick 
a format that meets the needs of their customers and clients. The most popular formats 
for web-based audio are described in Figure 8-3. 


ty =HTML 5 and CSS | Tutorial 8 Enhancing a Website with Multimedia 


Figure 8-3 Audio formats in HTML 


Format 


Description 


Codec 


File Extension(s) 


MIME Type 


MP3 


OGG 


WAV 


WebM 


MPEG-1 Audio Layer 3 or MP3 is one 
of the most widely used audio types 
and is the standard format for digital 
audio players 


Advanced Audio Coding or AAC is the 


encoding standard for all Apple products, 


as well as YouTube and several gaming 
systems and mobile devices; AAC was 
introduced as the successor to MP3 with 
the goal of achieving better sound qual- 
ity at similar compression ratios 


A file compression format designed 
for web audio, Ogg is an open-source 
and royalty-free format; in general, 


Ogg provides better sound quality than 


MP3, especially at lower bit rates 


The original audio format for Windows 


PCs, WAV is commonly used for storing 
uncompressed audio, making it imprac- 


tical for all but the shortest audio clips 


Free Lossless Audio Codec or FLAC 
is a free open-source digital music 
format that offers bit-perfect copies of 
CD-quality music at half the size 


WebM is an open-source format intro- 
duced by Google to provide royalty- 
free audio and video to be used with 
the HTML audio and video elements 


MP3 


AAC 


Vorbis 


PCM 


VP8 
VP9 


.mp3 


aac 
.mp4 
.m4a 


-099 


.Wav 


flac 


.webm 


audio/mpeg 


audio/mp4 


audio/ogg 


audio/wav 


audio/flac 


audio/webm 


Because there is not a single audio format, browsers and devices differ on the types 
of audio formats they support. For example, Apple devices do not support the Ogg 
format. Thus, before choosing an audio format, you need to determine whether your 
user’s browser will be able to play it. Figure 8-4 lists the browser support for different 
audio formats at the time of this writing, but, because browser support of audio and 
video is constantly evolving, you should always check the current levels of support on 
the browser market. Note that in some cases, a browser will support an audio format 


only if an extension is installed in the browser software. 


Figure 8—4 Browser support for audio formats 


Browser MP3 AAC Ogg WAV FLAC WebM 
Chrome v v v v v v 
Firefox v v v v v v 
Microsoft Edge v v v v v v 
Opera v v v v v v 
Safari v v v v 
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You can provide the most cross-browser support by supplying multiple versions 
of the same audio clip and letting the browser choose which one to play. To provide 
several versions of the same media file, nest several source elements within a single 
audio element as follows 


<audio> 
<source src="urll" type="mime-type" /> 
<source src="url2" type="mime-type" /> 


</audio> 
TIP ale urli, ur12, and so on are the URLs for each audio file and mime-type specifies 
the audio format associated with each file. The browser goes through the source 


Puan wl elements starting from the top, stopping once it encounters an audio format that it can 


lester nee le eer aRIGE RHO play, so that even though multiple audio files are listed, only one audio file will be 
file to determine the audio | Completely downloaded by the browser. 
format. The following audio element provides two choices for the Royal Wedding 


overture clip: 


<audio controls> 
<source src="cp overture.mp3" type="audio/mp3" /> 
<source src="cp overture.ogg" type="audio/ogg" /> 
</audio> 


The browser will first attempt to play the cp_overture.mp3 file but, if that is not a 
supported format, it will try to play the cp_overture.ogg file. Notice that including the 
type attribute, while not required, informs the browser of the file type and speeds up 
the process of choosing a compatible audio format. 


Exploring MIME Types 


The Multipurpose Internet Mail Extension or MIME type was first introduced as a 
way of attaching nontextual content to email messages. With the growth of the web, 
the use of MIME types expanded to include the flow of information across the web. 
Each MIME type includes the following header: 


INSIGHT 


type/ subtype 


where type is the general data type and subtype is a special classification of data 
within that type. The possible values for type are application, audio, image, message, 
model, multipart, text, and video. Within these types, there can be dozens or hundreds 
of subtypes. For example, HTML text files have the MIME type text/html while CSS 
files have the MIME type text/css. Audio files include MIME types such as audio/mp3, 
audio/ogg, and audio/wav among dozens of others. 

When a web server sends content to the browser, it includes the MIME type so that 
the browser is able to interpret and render that content for the user. The file extension 
given to a file should correspond to its MIME type. Thus, an MP3 file should be 
delivered by the server with the audio/mp3 MIME type and the mp3 file extension. 


Maxine has created two audio files of the overture music for Royal Wedding stored 
in the MP3 and Ogg format. Add these audio clips to her web page now. 


HTML 610 
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To add an audio clip: 
BD 1. Return to the cp_royal.html file in your editor. 
D2. Scroll down to the aside element for the Listen Up content. 
BD 3. Directly before the closing </aside> tag, insert the following content: 


<p>Click the play button below to hear the musical overture 
for Burton Lane's <cite>Royal Wedding</cite>. 

</p> 

<audio controls> 
<source src="cp overture.mp3" type="audio/mp3" /> 
<source src="cp overture.ogg" type="audio/ogg" /> 

</audio> 


Figure 8-5 highlights the newly added code. 


Figure 8-5 Inserting an audio clip 


[ 


displays the controls 
for the audio player 


p>Lane's greatest musical accomplishment may 
very well be his discovery of an ll-year-old singing sensation named 
Frances Gumm, whom the world now knows better as Judy Garland. 

Ip> 

p>Click the play button below to hear the musical overture 
for Burton Lane's <cite>Royal Wedding</cite>. 


two possible 


sources for 


<sourceAsrc="cp_overture.mp3" type="audio/mp3" | 
the audio file 


<source|src="cp_overture.ogg" type="audio/oge" /> 


BD 4. Save your changes to the file. 


Before running this audio clip, you will format the appearance of the browser's 
native media player that will run the audio. 


Applying Styles to the Media Player 


The appearance of the media player is determined by the browser itself. Figure 8-6 
shows the built-in media player for several major browsers. 
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Figure 8-6 Native audio player for different browsers 


e 0°00 / 0°32 —— 4) 
Chrome 
> © 0:00 q{) —@ 
Edge 


/ 


(>) 00:00 m 00:32 (149) 


FireFox 


P 000/032 C—— of) 


Opera 


> O/OC Qe -0:32 


Safari 


You can use CSS to set the width of the media player, add borders and drop shadows, 
and apply filters and transformations to the player’s appearance but, if you want a 
completely customized player, you need to build it yourself using the form controls 
introduced in the last tutorial along with a JavaScript program to set the behavior and 
operation of each control. There are also many third-party HTML 5 players available to 
allow you to create a customized media player adapted to the needs of your company 
or organization. 

For the Cinema Penguin website, you will use the native media player supplied 
by the browser but you will use CSS to make some minor changes to the player's 
appearance. 


To apply styles to the media player: 


BD 1. Scroll to the document head of the ep_royal.html file in your editor and add 
a link to the cp_media.css style sheet directly before the closing </head> tag. 


BD 2. Save your changes to the file and then use your editor to open the 
cp_media_txt.css file from the html08 > tutorial folder. Enter your name and 
the date in the comment section of the file and save it as cp_media.css. 
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BD 3. Go to the Audio and Video Player Styles section and insert the following 
style rule: 


By default, audio and 
video elements are 
displayed in-line with the 
surrounding page content. 


audio { 
filter: drop-shadow(8px 8px 15px rgb(51, 51, 51)); 
display: block; 
margin: 10px auto; 
width: 90%; 


} 
Figure 8-7 highlights the newly added styles for the audio element. 


Figure 8-7 Styles for the native media player 


: drop- shadow 


BD 4. Save your changes to the style sheet. 


Test the audio clip you entered into the Cinema Penguin web page. 


To play the audio clip: 
BD 1. Reload the cp_royal.html file in your web browser. 


D 2. Scroll to the bottom of the page and click the play button on the media 
player to play the embedded audio clip. 


Figure 8-8 shows the appearance of the media player within the Google 
Chrome browser. 
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Figure 8-8 Appearance of the native media player within Google Chrome 


volume 
controls 


000/032 C——= af) 


BD 3. The clip will run for about 32 seconds. Press the stop button on the media 
player to halt the playback. 


Trouble? Depending on your browser and device, you may see a different 
media player in your web page. 


Maxine likes the audio clip but asks what would happen if the user opens this 
page in an older browser that doesn’t support the audio element. In that situation, the 
browser would not display any media player, but you can provide alternate content for 
the user. 


Providing a Fallback to an Audio Clip 


It is considered bad design to add a feature to a web page without also providing some 
fallback option to users who cannot take advantage of that feature. You already used 
one type of fallback option by specifying two audio sources so that, if the browser 
cannot play the MP3 version of the audio clip, it can attempt to play the OGG version. 

If the browser can’t play either version or doesn’t support the audio element at all, 
you can follow the source elements with HTML code that the browser will recognize. 
The simplest fallback option is a text string indicating that the user needs to upgrade the 
browser to take advantage of the feature you added to the page. 

Add a paragraph within the audio element to display a message for users who are 
unable to play either of the two source files you provided. 
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To provide alternate text to the audio clip: 
D 1. Return to the cp_royal.html file in your editor. 


BD 2. Scroll down to the audio element and insert the following code directly 
before the closing </audio> tag: 


<p><em>To play this audio clip, your browser needs to support 
HTML 5.</em></p> 


Figure 8-9 highlights the fallback text for the audio clip. 


Figure 8-9 Adding fallback text to the audio element 


audio controls 

source srce"cp_overture.mp3" type="audio/mp3" 

source srce"cp_overture.oge” type=s"audio/oge" 

<p><em>To play this audio clip, your browser needs to support HTHL5.</em></p> 
faudio 


aside 


displays this paragraph 
when the audio element 
is not supported 


BD 3. Save your changes to the file. 


You can test this feature by opening the page in an older browser or using the 
developer tools provided with your browser to emulate an earlier browser version. 
Figure 8-10 shows how the page might look when the audio element is not supported. 


Fallback text displayed within the web page 


fallback text displayed for 
browsers that don’t support 
the audio element 


Another way of supporting older browsers is to provide code that will work with 
multimedia plug-ins. 
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Verbal Communication: Tips for Effective Web Audio 


Enhancing your website with audio clips can be an effective way to provide information 
and entertainment for your users and customers. However, it must be used judiciously 
to avoid annoying users. Here are some tips to keep in mind when using web audio: 


PROSKILLS ¥, 


e Avoid background music. Remember that many customers multitask when using the 
web and are often listening to their own music and audio files. Don’t annoy them by 
inserting your audio clip over theirs. 

© Give users control. Turn off the autoplay feature of your audio player. Let each user 
choose whether or not to play your audio clip. Your users might be accessing your 
site at work or in a public place where audio is inappropriate. Always give users the 
ability to pause, stop, and—above all—mute the audio. 

¢ Keep it short. If you use sound to supplement different visual effects in your page, 
keep the clips short in duration. Don’t force your users to listen to long clips. 

¢ Accommodate hearing-impaired customers. The web is an important source of 
information for the hard of hearing. Always provide alternatives for those who can’t 
hear your site’s audio content. 


Finally, every feature on your website, including sound, should have a reason for being 
there. An audio clip should provide users with important information that cannot be 
conveyed in any other way. 


Exploring Embedded Objects 


As you learned earlier, older browsers relied on plug-ins to play audio and video files. 
The plug-ins were marked using the following embed element 


<embed src="url" type="mime-type" 
width="value" height="value" /> 


where url is the location of the media file, the type attribute provides the mime-type, 
and the width and height attributes set the width and height of the media player. For 
example, the following code loads the cp_overture.mp3 file into a media player 250 
pixels wide by 50 pixels high: 
<embed src="cp_overture.mp3" type="audio/mp3" 
width="250" height="50" /> 


The plug-in associated with this particular media file is defined within the user’s 
browser. One user might associate MP3 files with Apple’s QuickTime Player while 
another user might associate them with the Windows Media Player. One of the challenges 
with plug-ins is that they relied on the user installing a specific piece of software, which 
some users were either unable or reluctant to do. HTML 5 avoids this problem and makes 
inserting audio and video content as seamless as inserting inline images. 


Plug-In Attributes 


The src, type, height, and width attributes are generic attributes and can be applied 
to the embed element for any plug-in. The embed element also allows for attributes 
that are tailored to specific plug-ins. For example, the following embed element adds 
attributes that are recognized by Apple’s QuickTime Player to display the media player 
controls and prevent the playback from starting automatically: 


<embed src="cp overture.mp3" width="250" height="50" 
controller="yes" autoplay="no" /> 
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Browsers that don’t support 
HTML 5 ignore the audio 
and source elements but 
apply the embed element to 
insert the media player via 

a plug-in. 


Other plug-ins might use different attributes or attribute values to achieve the same 
effect. For Windows Media Player, the equivalent tag is as follows: 


<embed src="cp overture.mp3" width="250" height="50" 
showcontrols="yes" autostart="no" /> 


Both plug-ins can be supported by including both sets of attributes within the same 
tag as follows: 


<embed src="cp overture.mp3" width="250" height="50" 
controller="yes" autoplay="no" 
showcontrols="yes" autostart="no" /> 


Each plug-in will use the attributes designed for it and ignore the others, enabling a 
single tag to work across multiple plug-ins. 


Plug-Ins as Fallback Options 


Plug-ins can act as a fallback option for browsers that don’t support the HTML 5 
multimedia elements by adding the embed element to the end of the audio element as 
the last option for the browser. The following code demonstrates how to employ a plug-in 
as a fallback to the audio element you inserted earlier into the cp_royal.html file: 


<audio controls> 
<source src="cp overture.mp3" type="audio/mp3" /> 
<source src="cp overture.ogg" type="audio/ogg" /> 
<embed src="cp overture.mp3" width="250" height="50" 
controller="yes" autoplay="no" 
showcontrols="yes" autostart="no" /> 
</audio> 


The use of plug-ins has steadily declined since the widespread adoption of the 
HTML 5 standard. Maxine decides against including support for plug-in media players, 
instead she will rely on the fallback message directing users to upgrade older browsers. 

You have completed your work to add a sound clip to the Royal Wedding page. In 
the next session, you insert a video clip of a famous dance from that movie. 


REVIEW 


Session 8.1 Quick Check 


1. What is the utility to encode and decode a multimedia file? 
a. MIME type 
b. codec 
c. container 
d. plug-in 
2. To compress data by removing redundant information, apply: 
a. lossy compression 
b. lossless compression 
c. codec compression 
d. plug-in compression 
3. Which of the following is not a sound format? 
au 
WebM 
WAV 
FLAC 


aoe 
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4. To automatically play a sound clip continuously in the background when a page 
is loaded, which attribute(s) should you add to the audio element? 
a. autostart play 
b. autostart = "play" 
c. autoplay loop 
d. autoplay = "loop" 
5. What code do you insert within an <audio> clip to allow the browser to choose 
between the bground.mp3 and bground.ogg files? 
a. <source src="bground.mp3" type="audio/mp3" /> 
<source src="bground.ogg" type="audio/ogg" /> 
b. <src audio="bground.mp3" type="audio/mp3" /> 
<sre audio="bground.ogg" type="audio/ogg" /> 
c. <audio src="bground.mp3" type="audio/mp3" /> 
< audio src="bground.ogg" type="audio/ogg" /> 
d. <audio source="bground.mp3" type="audio/mp3" /> 
< audio source="bground.ogg" type="audio/ogg" /> 
6. When multiple audio files are suggested in the audio element, the one played by 
the browser is: 
a. The first file in the list 
b. The last file in the list 
c. The first file supported by the browser in the list 
d. The last file supported by the browser in the list 
7. To mark a plug-in, use the: 
a. plugin element 
b. plug-in element 
c. audio element 
d. embed element 
8. When a browser encounters the audio element, it: 
a. Loads a plug-in file associated with web audio 
b. Loads the W3C audio player 
c. Loads an audio player built into the browser 
d. Requests that the user update the browser 
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Session 8.2 Visual Overview: 


The video element The poster attribute MP4 and WebM are the 
embeds a video file displays a preview two most common video 


in the web page. image of the video file. formats on the web. 


<video controls poster="cp_photo2.png"> 
<source src="cp_dance.mp4" type="Vvideo/mp4" /> 
<source src="cp_dance.webm" type="Vvideo/webm" /> 
The track element <track kind="captions" lLabel="Dance" 


attaches a text track = . a 
to the media clip. stic="cp_captions.vtt" /> 


</video> 


The kind attribute Tracks are stored 
specifies the type in text files in the 
of track text. WebVTT format. 
The cue time interval The line attribute 
- indicates when the cue sets the vertical The align attribute 
WebVTT files start with will be visible (from 0.5 position of the cue aligns the text 
N the WEBVTT statement. to 4 seconds). text. within the cue. 


(ns cue label identifies WEBVTT 
the track cue. 


( Th text is the text ies 

e cue text IS ie tex ‘a . e 

displayed in the video ©0:00.500 --> 00:04.000 Line:5% align:middle 
window. <c.Main>The Ceiling Dance</c> 


““ 
Cue text can be marked 

as classes using the 

<c> </c> tag. 


Subtitle 
00:04.500 --> 00:08.000 Line:5% align:middle 
from Royal Wedding (1951) 


Ending 
©1:38.000 --> 01:44.000 Line:80% position:95% align:end 
See more videos at <i>Cinema Penguin</i> 


The position Each track cue is 
attribute sets the identified with a label, 
horizontal position the time interval in 

of the cue text. which the cue is 
displayed, and the 
text of the cue. 
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Playing Web Video 


The cue pseudo-element 
selects the cues from the 


media track. 


sscue: { 
Bria ago N ‘gba(0, 0, 0; 9.3); 


color: 


fones 2: 268i seit 


} The cue text is from 
the Main class. 


In Focus :: cue(.Main) { 
text-shadow: black 3px 3px Opx; 

The high point of Royal Wed Sete ieee 

Dance in which Astaire apped 3 

the ceiling and walls of his hi 

effect was accomplished by putting the whole 


set inside of a rotating cage with fixed camera 
mount. As the cage turned, Astaire would 
seamle 

box, ct 


ssly dance across the four sides of the 
reating the illusion of weightlessness 
Click the play button to view this classic dance 
sequence, 


The Title cue text as 
rendered in the video 
k window. 


im The Ceilin THatice 


Native media player 
provided by the browser 
to play video files. 


Il 0:02/ 1:44 


aire media anes 
displays controls 
for video playback. 


Source: Archive.org 
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Exploring Digital Video 


In this session, you explore how to embed video within your web pages. Before 
exploring the HTML video elements, you examine some of the issues involved with 
producing video files suitable for the web. 


Video Formats and Codecs 


A video file typically contains two codecs: one codec for audio and another for the 
video images. The audio codecs are the same ones you examined in the last session. 
Figure 8-11 describes the most commonly used video codecs on the web. 


Figure 8-11 Video codecs used on the web 


Codec Description 

H.264 Developed by the MPEG group, the H.264 codec is the industry standard for 
high-definition video streams, movie sharing websites such as YouTube, and video 
plug-ins 

Theora Theora is a royalty-free codec developed by the Xiph.org Foundation that produces 
video streams that can be used with almost any container 

VP8 VP8 is an open-source royalty-free codec owned by Google for use in Google’s 
WebM video format 

VP9 VP9 is Google's successor to the VP8 codec, offering the same video quality as VP8 


at half the download size 


The most popular video codec is H.264 used by YouTube and most commercial 
vendors; however, because H.264 is a commercial product, it is not royalty free. 
This is not an issue if you are creating a video that is not actually being sold. If you 
are creating a commercial video that uses the H.264 codec, you might have to pay 
licensing fees depending on the number of subscribers to your video content. The 
Theora, VP8, and VP9 codecs are royalty free, but they are not as widely supported at 
the time of this writing. 

Browser support for video containers is focused on three formats: MP4, Ogg, and 
WebM, with multiple combinations of video and audio codecs available within each 
container. Figure 8-12 summarizes these formats and their use on the web. 


Figure 8-12 Video formats used on the web 


Video 
Format Description Codec File Extension(s) MIME Type 
MPEG-4 MPEG-4 or MP4 is a widely used H.264 .mp4 video/mp4 
proprietary format developed by .m4v 
Apple based on the Apple QuickTime 
movie format 
Ogg Ogg is an open-source format Theora  .ogg video/ogg 
developed by the Xiph.org 
Foundation using the Theora codec 
as an alternative to the MPEG-4 codec 
WebM WebM is an open-source format VP8 .webm video/webm 
introduced by Google to provide VP9 


royalty-free video and audio to be 
used with the HTML 5 video element 
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Video content suffers the same limitation as audio content in that no single format 
has universal support among all browsers and devices. Thus, as with audio content, 
you may have to supply multiple versions of the same video if you want the widest 
cross-browser support. See Figure 8-13. 


Figure 8-13 Browser support for video formats 


Browser MPEG-4 Ogg WebM 
Chrome v v v 
Firefox v v v 
Microsoft Edge v v v 
Opera v v v 

Safari v 


The level of support for video formats is constantly changing as are the video 
formats themselves. As always, the best way to determine whether a browser supports a 
particular video format is to test the video file on that browser. 


Using the HTML 5 video Element 


Videos are embedded into a web page using the following video element 


<video attributes> 
<source src="urll1" type="mime-type" /> 
<source src="url2" type="mime-type" /> 


</video> 
where attributes are the HTML attributes that control the behavior and appearance 
of the video playback, ur11, ur12, and so on are the possible sources of the video, and 
mime-type specifies the format associated with each video file. As with sources for the 
audio element, a browser uses the first source it finds in a format it supports. Fallback 
content can also be added after the list of video sources for browsers that don’t support 
HTML 5 video. The video element supports many of the same attributes used within 
the audio element shown earlier in Figure 8-2. 


The following code embeds two possible video files on the web page with a fallback 
message for browsers that don’t support the video element: 


<video controls> 
<source src="cp dance5.mp4" type="video/mp4" /> 
<source src="cp dance5.webm" type="video/webm" /> 
<p><em>To play this video clip, your browser needs 
to support HTML 5.</em></p> 

</video> 


Maxine has a video clip of a classic dance sequence from Royal Wedding in which 
Fred Astaire appears to dance on the walls and ceiling of his hotel room. She has two 
versions of the clip: one in MP4 format and the other in the WebM format. Use the 
video element now to embed these videos on her web page. 
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To embed a video file into the web page: 


D 1. If you took a break after the previous session, make sure the ep_royal.html 
file is open in your editor. 


BD 2. Scroll down to the aside element titled In Focus and add the following code 
directly before the closing </aside> tag: 


<p>Click the play button to view this classic dance sequence.</p> 
<video controls> 
<source src="cp dance.mp4" type="video/mp4" /> 
<source src="cp dance.webm" type="video/webm" /> 
<p><em>To play this video clip, your browser needs to 
support HTML 5.</em></p> 
</video> 


Figure 8-14 highlights the code for the embedded video. 


Adding a video clip to a web page 


in which Astaire appea to dance on the ceiling and walls 

»f his hotel room. The effect was accomplished by putting the whole set 
inside of a rotating cage with fixed camera mount. 

As the cage turned, Astaire 

would seamlessly dance across the four sides of the box, creating the 
displays the illusion of weightlessness. 

browser's native 
media player 


<p»Click [the play button to view this classic dance 
sequence w /p> 


<video controls> 
sources for the ksource src="cp_dance.mp4" type="video/mp4" /> 
video clip Kksource src="cp_dance.weba" type="video/webm" /> 
<p><em>To play this video clip, ¥ browser needs to 


support HTML5.</em></p> 
</video> 


i) 


( fallback text for 
browsers that don’t 
support HTML5 video 


BD 3. Save your changes to the file. 


Next, you modify the cp_media.css style sheet file to format the appearance 
of the video media player for your browser. 


BD 4. Go to the mp_media.css file in your editor. 


BD 5. Modify the style rule for the audio element by adding the video selector 
separated by a comma. 


Figure 8-15 highlights the modified style rule. 


Defining the video player styles 


add video to the 


style rule selector 
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BD 6. Save your changes to the style sheet and then reopen the cp_royal.html file 
in your browser. 


D 7. Click the play button on your browser's media player to play the video clip. 


Figure 8-16 shows the video clip in action as it replays the ceiling dance 
sequence from Royal Wedding. 


first frame of the 
video is used as 
the preview image 


>» 0:00/1:44 


video player 
controls 


When the media player initially loads a video file, the player shows the first video 
frame as a preview of the video’s content. Maxine would like to replace that preview 
image with an image of Astaire dancing on his apartment room’s wall. To define the 
video’s preview image, you apply the following poster attribute to the video element 


<video poster="url"> 


</video> 


where url points to an image file containing the preview image. The poster attribute 
is also used as a placeholder image that is displayed when the video is still being 
downloaded or used in place of the video if the browser fails to download the video 
file at all. 

Maxine suggests you use the cp_photo2.png file as the poster image for the 
video clip. 
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To set the video’s poster image: 
BD 1. Return to the cp_royal.html file in your editor. 
BD 2. Add the following attribute to the video element: poster="cp photo2.png". 
Figure 8-17 highlights the poster attribute. 


Figure 8-17 Defining a poster image for the video 


preview image 
of the video clip 


<video controls poster="cp_photo2.png"> 
<source src="cp_dance.mp4" type="video/mp4" /> 
<source src="cp_dance.webm" type="video/webm" /> 
<p><em>To play this video clip, your browser needs to 
support HTML5.</em></p> 

</video> 


BD 3. Save your changes to the file and then reload cp_royal.html in your browser. 


Figure 8-18 shows the poster image applied to the video of the ceiling 
dance sequence. 


Figure 8-18 Video clip poster image 


image displayed 
prior to playing 
the video 


Source: Archive.org 


Maxine suggests that the video clip would benefit from some descriptive captions. 
Rather than modifying the video clip itself, you can add those captions using media tracks. 


Adding a Text Track to Video 


With the increased reliance on multimedia on the web comes the responsibility of 
making audio and video content accessible to all users. This can be done by adding a 
text track to the media clip that can be read or recited to visually impaired users. Text 
tracks are added to an audio or video clip using the following track element 


<track kind="type" src="url" label="text" srclang="lang" /> 
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where the kind attribute defines the track type, the src attribute references a file 
containing the track text, the label attribute gives the track name, and the srclang 
attribute indicates the language of the track. A single media clip might be associated 
with multiple track types as indicated by the value of the kind attribute. Figure 8-19 
lists the different kinds of tracks that can be associated with an audio or video file. 


Figure 8-19 Values of the kind attribute 


Kind Value Description 


captions Brief text descriptions synced to specified time points within the media clip; 
designed for hearing impaired users 

chapters Chapter titles used by the media player to navigate the user to specific time 
points within the media clip 

descriptions Longer descriptions synced to specified time points within the media clip; 
designed for visually impaired users 

subtitles (the default) Translation of dialog from the media clip; the language of the 
subtitle must be specified in the srclang attribute 


metadata Metadata content used by external scripts accessing the media file 


For example, the following code attaches six tracks to the story.mp4 video file: 


<video controls> 
<source src="story.mp4" type="video/mp4" /> 
<track kind="captions" src="captions.vtt" label=" Captions" /> 
<track kind="chapters" src="chapters.vtt" label="Chapters" /> 
<track kind="subtitles" src="english.vtt" srclang="en" 
default /> 
<track kind="subtitles" src="french.vtt" srclang="fr" /> 
<track kind="subtitles" src="spanish.vtt" srclang="es" /> 
<track kind="descriptions" src="summary.vtt" label="Summary" /> 
</video> 


The tracks contain captions, chapter titles, subtitles in English, French, and Spanish, 
and finally a track that summarizes the contents of the video. The media player can 
only show one of these tracks at a time. The active track by is marked with the default 
attribute, which enables that track and disables all of the other tracks. In this case, 

the track English subtitles is enabled while all other tracks are disabled. The user can 
choose a different track from the media player, usually by selecting the track from one 
of the media player controls. Note that the default attribute is required, even if the 
track list contains only one track. 


Making Tracks with WebVTT 


Tracks are stored as simple text files written in the Web Video Text Tracks or WebVTT 


language. The format of a WebVTT file follows the structure 
A WebVTT file has the file 


extension .vtt. WEBVTT 
cuel 


cue2 
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where cuel, cue2, and so on are cues matched with specific time intervals within the 
media clip. Note that the list of cues is separated by a single blank line after the cue 
text. Unlike HTML, white space is not ignored in WebVTT files. 

Each cue has the general form 


label 
start --> stop 
cue text 


where label is the name assigned to the cue, start and stop define the time interval 
associated with the cue, and cue text is the text of the cue. Times are entered in the 
format mm: ss.ms for the minutes, seconds, and milliseconds values. For longer clips, 
you can include an hours value, writing the time in the form hh: mm: ss.ms. 

The following code adds two cues to the WebVTT file: 


WEBVTT 


Intro 
00:00.500 --> 00:09.000 
Once upon a time 


Conclusion 
14:20.000 --> 14:30.000 
And they all lived happily ever after 


TIP a Intro cue, “Once upon a time”, starts at the half-second mark and runs through the 
9-second mark; the Conclusion cue, “And they all lived happily ever after”, covers the 
Sree time interval from 14 minutes 20 seconds through 14 minutes 30 seconds of the clip. 
WebVTT file will also be Create a track file now for the ceiling dance video displaying a title and subtitle at 
displayed on multiple lines the start of the video and an advertisement for Cinema Penguin near the end. 
when played back. 


To create a track file: 


D 1. Use a text editor to open the ep_captions_txt.vtt file from the 
html08 > tutorial folder. Save this blank text file as cp_captions.vtt. 


D 2. Enter weBvtT in the first line of the file. 


D 3. Insert a blank line followed by the text for the Title cue spanning the interval 
from the first half-second up to the fourth second: 


Title 
00:00.500 --> 00:04.000 
The Ceiling Dance 


D 4. Insert a blank line followed by the Subtitle cue in the interval from 4.5 
seconds through 8 seconds: 


Subtitle 
00:04.500 --> 00:08.000 
from Royal Wedding (1951) 


D 5. Insert a blank line followed by the Ending cue in the interval from 1 minute 
38 seconds through 1 minute 44 seconds: 


Ending 
01:38.000 --> 01:44.000 
See more videos at Cinema Penguin 


Figure 8-20 describes the contents of the cp_captions.vtt file. 
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Figure 8-20 WebVTT file to define track text 


: first line indicates 
WEBVTT 
the format of the file 


cue spans the interval Title 
from 0.5 seconds to 706.500 --> 06:04.000 1st cue 
4 seconds The Ceiling Dance 


(cue text ) Subtitle 
@0:04.500 --> 00:08.000 


from Royal Wedding (1951) 


Ending 
01:38.900 --> 01:44.000 3° cue 
See more videos at Cinema Penguin 


D 6. Save your changes to the file. 


Next, you apply the cp_captions.vtt file to the dance sequence video. If you are 
testing your page on Google Chrome or Opera, be aware that you will have to upload 
your files to a web server. Neither of these browsers will open track files stored locally. 


To add captions to a video clip: 


BD 1. Return to the cp_royal.html file in your editor and scroll down to the video 
element. 


Dd 2. Directly after the second source element, insert the following track: 


<track kind="captions" label="Dance Captions" 
src="cp captions.vtt" default /> 


Figure 8-21 highlights the HTML code for the track. 


displays the track source of 
text as a caption caption label caption text 


enables the track 
for display in the 
media player 


video cont positer="cp phot 


source s mnce.webm" typ video/web 

<track kind="captions" Label="Dance Captions” src="cp_captions.vtt" default /> 
em>To play this video clip, your browser needs to 

support HTMLS.</ ee 


idec 


e 
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BD 3. Save your changes to the file and then reload cp_royal.html in your browser. 
If you are using Google Chrome or Opera, upload your files to a web server 
for testing. 


D4. Click the play button on your browser's media player and, if necessary, click the 
Closed Captioning button to display the video captions. Verify that captions 
appear at the half-second, 4.5 second, and 1 minute 38 second marks in the video. 


Figure 8-22 shows the final caption from the video clip. 


Figure 8-22 Caption in the ceiling dance movie 


ending caption 


S 
See more videos at Cinema Penguin 


1:39 / 1:44 


Source: Archive.org 


Trouble? If you don’t see any captions, check the code in your WebVTT file 
against the code shown in Figure 8-20. Make sure your text matches that 
figure because the WebVTT syntax must be strictly followed. 


By default, the caption cues are centered at the bottom of the video window. 
To change the position of the cues, you can edit the settings in the WebVTT file, as 
discussed next. 


Placing the Cue Text 
The size and position of the cue text can be set by adding the following cue settings 
directly after the cue’s time interval 

setting1:valuel setting2:value2 ... 
where setting1, setting2, and so on define the size and position of the cue text and 
valuel, value2, and so on are the setting values. Note that there is no space between 


the setting name and value. Figure 8—23 describes the different settings supported in the 
WebVTT language. 
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Figure 8-23 Cue attributes in WebVTT 


Cue Setting Description 
align: value Sets the horizontal alignment of the text within the cue, where value is start 
(left-aligned), middle (center-aligned), or end (right-aligned) 


line: value Sets the vertical position of the cue within the video window, where value 
ranges from 0% (top) to 100% (bottom) 

position:value Sets the horizontal position of the cue within the video window, where value 
ranges from 0% (left) to 100% (right) 


size: value Sets the width of the cue as a percentage of the width of the video window 


vertical: type Displays the cue text vertically rather than horizontally where type is r1 
(writing direction is right to left) or 1x (writing direction is left to right) 


By applying the Line and align settings, the Intro cue in the following track is 
placed at the top of the video window and centered horizontally. By applying the line, 
ge easter ae Gil position, and align settings, the Conclusion cue is placed at the bottom-left corner of 
andi position ee the video window with the cue text left-aligned. Note that the default placement of the 


50% and the align valueto | Cue is the bottom center of the video window. 
middle. 


To center the cue in the 


Intro 
00:00.500 --> 00:09.000 line:0% align:middle 
Once upon a time 


Conclusion 
14:20.000 --> 14:30.000 line:100% position:0% align:start 
And they all lived happily ever after 


Maxine suggests that you center the Title and Subtitle cues for the ceiling dance 
video near the top of the video window and place the Ending cue near the bottom-right 
corner with the text right-aligned. 


To position the track cues: 
BD 1. Return to the cp_captions.vtt file in your editor. 
D 2. After the time intervals for the Title and Subtitle cues, insert the attributes: 
line:5% align:middle 
D 3. After the time interval for the Ending cue, insert the attributes: 
line:80% position:95% align:end 


Figure 8-24 highlights the attributes for each cue within the track. 
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Figure 8-24 Placing the cue text 


Title 
00:00.500 --> 00:00:04.000 Line:5% align:middle 
The Ceiling Dance 


places the Title and 

Subtitle cues near the 
top of the video window 
with the text centered 


Subtitle 
00:04.500 --> 00:00:08.000 Line:5% align:middle 
from Royal Wedding (1951) 


Ending 
©1:38.000 --> 00:01:44.000 Line:80% position:95% align:end 

. 4 Ny 
See more videos at Cinema Penguin 


places the Ending cue near the 
bottom-right corner of the video 
window with the text right-aligned 


D 4. Save your changes to the file and then reload the cp_royal.html file in your 
browser. If you are using Google Chrome or Opera, upload your files to a 
web server for testing. 


D 5. Play the video clip and verify that the Title and Subtitle cues appear centered 
near the top of the video window and the Ending cue appears near the 
bottom-right corner of the window. 


Trouble? If the cues have not changed position, check your code against the 
code in Figure 8-24. Make sure you have not entered a space between the 
attribute name and the attribute value or placed the values on a new line. At 
the time of this writing, Microsoft Edge and Internet Explorer do not support 
positioning the track cues. 


The WebVTT settings do not include styles to format the appearance of the cue text, 
but you can create such styles using CSS. Note that browser support for such styles is 
mixed; therefore you should not make these styles crucial to users’ interpretation of the 
video cues text. 


Applying Styles to Track Cues 


CSS supports the following cue pseudo-element to format the appearance of the cues 
appearing within a media clip: 
::cue { 
styles 
} 


Styles for the cue pseudo-element are limited to the background, color, 
font, opacity, outline, text-decoration, text-shadow, visibility, and 
white-space properties. For example, the following style rule displays all cues in 
a 2em yellow serif font on a red background: 


::cue { 
background: red; 
color: yellow; 
font: 2em serif; 
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Use the cue pseudo-element to change the format of the captions in the ceiling 
dance video to an orange color on a semi-transparent black background. Set the size 
and type of the caption text to a 1.2em serif font. 


To format the cue text: 


BD 1. Return to the ep_media.css file in your editor and scroll down to the Track 
Styles section. 


BD 2. Add the following style rule: 


::cue { 
background: rgba(0, 0, 0, 0.3); 
color: orange; 
font: 1.2em serif; 


} 
Figure 8-25 highlights the style rule for cue text. 


Figure 8-25 Applying styles to cue text 


selects the cue text 
from the media clip 


sscue { 

ackground: rgba(®, 0, ©, 0.3); 
color: orange; 

font: 1.2em serif; 


changes the 
background to 
semi-transparent black 


} 


BD 3. Save your changes to the style sheet and then reload the cp_royal.html file in 
your browser. If you are using Google Chrome or Opera, upload your files to 
a web server for testing. 


D 4. Play the video clip and verify that the captions appear in a serif orange font 
on a semi-transparent black background. 


Trouble? At the time of this writing, only Google Chrome and Opera support 
styles that modify the color and typeface of the cue text. Safari supports 
styles to change the font size. Internet Explorer and Firefox do not support 
any cue styles. 


The cue pseudo-element selects all of the cue text in the media clip. To format 
specific cues or text strings within a cue you identify sections of the cue text using the 
following markup tags: 


@ <i></is> for italicized text 
© <b></b> for bold-faced text 
¢ <u></u> for underlined text 
® <span></span> to mark spans of text 
a > - <ruby></ruby> to mark ruby text 
Rly texererersae ® <rt></rt> to mark ruby text 


annotative characters 
placed above or to the 
right of other characters and Ending 


For example, the following code italicizes the name of the website using the <i></i> tag 


is often used with Chinese 01:38.000 --> 01:44.000 


or Japanese symbols. : i : : : 
sce y See more videos at <i>Cinema Penguin</i> 
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WebVTT also supports tags that are not part of the HTML library, such as the 
following <c></c> tag used to mark text strings belonging to a particular class 


<c.classname></c> 


where classname defines the class. 
And for captions that distinguish between one voice and another, WebVTT supports 
the following <v></v> tag 


<v name></v> 


where name is the name of the voice associated with the caption. The following track 
shows how to apply the <c></c> and <v></v> tags to mark scenes and the voices of 
Bernardo and Francisco from the opening of Hamlet. 


Cuel 
00:00.000 =--= 00:05.000 
<c.scene>Elsinore. A platform before the castle</c> 


Cue2 

00:05.500 --> 00:12.000 

<v Bernardo>Who's there?</v> 

<v Francisco>Nay, answer me: stand, and unfold yourself.</v> 


Cue3 

00:12.500 --> 00:18.000 

<v Bernardo>Long live the king!</v> 
<v Francisco>Bernardo?</v> 


For cues based on their class name, add the class name to the cue pseudo-element 
as follows 


::cue(.classname) { 
style rules 
} 


where classname is the class marked within in the <c></c> tag. 
To format voice text, use the style rule 


::cue(v[voice=name]) { 
style rules 
} 


where name is the name assigned in the <v></v> tag. 

Thus, the following style rules display the scene and voices from the opening scene 
in Hamlet using red for the scene direction text, blue for Bernardo’s voice, and green 
for Francisco's voice: 


::cue(.scene) {color: red; } 
::cue(v[voice=Bernardo]) {color: blue; } 
::cue(v[voice=Francisco]) {color: green; } 


Maxine suggests that the opening Title caption be displayed in a larger font with a 
drop shadow and that the website in the ending cue be italicized. Mark the caption 
text using the <c></c> tag belonging to the Main class and italicize the name of the 
website. Then, add the appropriate style rule to your style sheet. 


To apply styles to cue text: 
BD 1. Return to the cp_captions.vtt file in your editor. 


BD 2. Enclose the cue text for the Title cue within <e> tags with the class 
name Main. 
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BD 3. Go to the Ending cue and enclose Cinema Penguin within opening and 
closing <i> tags. 


Figure 8-26 highlights the revised code in the file. 


Figure 8-26 Applying a class to cue text 


WEBVTT 


Title 

00:00.500 --> 00:04.000 Line:5% align:middle 
<c.Main>The Ceiling Dance</c> 

markup tag for 
the Main class Subtitle 

00:04.500 --> 00:08.000 Line:5% align:middle 
from Royal Wedding (1951) 


Ending 
01:38.000 --> 01:44.000 Line:80% position:95% align:end 
See more videos at <i>Cinema Penguin</i> 


displays the website 
title in italics 


BD 4. Save your changes to the file and then return to the ep_media.ess in your 
editor. 


D 5. Scroll to the bottom of the file and add the following style rule: 


::cue(.Main) { 
text-shadow: black 3px 3px Opx; 
font: 2.5em serif; 


} 
Figure 8-27 highlights the style rule for cues belonging to the Main class. 


Figure 8-27 Styling cues based on class name 


73 cue { 
background: rgba(@, 0, 0, 0.3); 
color: orange; 
font: 1.2em serif; 


selector for cue text 
belonging to the 
Main class 


} 


:i:cue(.Main) { 
text-shadow: black 3px 3px Opx3 
font; 2.5em serif; 


D 6. Save your changes to the file and then reload the cp_royal.html file in your 
browser. If you are using Google Chrome or Opera, upload your files to a 
web server for testing. 


D 7. Play the ceiling dance video and note that the first caption is displayed in a 
larger font with a black drop shadow. See Figure 8-28. 
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Figure 8-28 Formatted text from the Title cue 


Title cue is displayed 
in a larger font with a 
black text shadow 


Source: Archive.org 


Trouble? At the time of this writing, support for video captions is mixed. 
Only Google Chrome and Opera support all of the text styles used to format 
captions. Safari supports styles for font size and Firefox supports styles for 
font colors. Edge does not support caption styling. 


Maxine likes your work in creating and formatting the ceiling dance video clip. 
However, she would like to review other options for embedding multimedia content on 
her website. 


Using Third-Party Video Players 


Prior to the widespread adoption of HTML 5 for embedded video, browsers used 
plug-ins using the following object element 


<object attributes> 
parameters 
</object> 


where attributes define the object and parameters are values passed to the 
object controlling the object’s appearance and actions. The object element, which 
replaced the embed element introduced in the last session, could be used for any type 
of content—from sound and video clips to graphic images, PDF files, and even the 
content of other web pages. 

The parameters of the object are defined using the following param element 


<param name="name" value="value" /> 


where the name is the name of the parameter and the value is the parameter’s value. 
There is no standard list of parameter names and values because they are based on the 
plug-in used to display the object. For example, the following object element could 
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be used in place of the embed element you studied in the first session to insert the 
cp_overture.mp3 audio clip: 


<object data="overture.mp3" type="audio/mp3" 
height="20" width="250"> 

<param name="sre" value="cp_ overture.mp3" /> 
</object> 


The presumption is that content of the audio/mp3 mime-type would be associated 
with a plug-in that the browser would run to play the audio clip using the sre and 
value attributes of the param element. Thus, the page’s author would have to know 
how to work with the individual plug-ins and provide workarounds for the different 
plug-ins the user may have installed. 


Exploring the Flash Player 


Perhaps the most-used plug-in for video playback was the Adobe Flash player, which 
was embedded using the following object element 


<object data="url" 
type="application/x-shockwave-flash" 
width="value" height="value"> 
<param name="movie" value="url" /> 
parameters 
</object> 


where url is the location and filename of the file containing the Flash video, and 
parameters are the other param elements that manage the appearance and actions of 
the player. Notice that you must always include at least the movie parameter to identify 
the video file to be played in the Flash player. Figure 8-29 lists some of the other 
parameters recognized by the Adobe Flash Player. 


Figure 8-29 Parameters of the Flash player 


Name 


Description 


bgcolor 


flashvar 


id 

loop 
menu 
name 
play 
quality 


scale 


wmode 


Value(s) 
color value 
text 

text 

true | false 
true | false 
text 

true | false 


low | autolow | 
autohigh | medium 
| high | best 


showall | 
noborder | 
exactfit 


window | opaque | 
transparent 


Sets the background color of the player 


Contains text values that are passed to the player as 
variables to control the behavior and content of the movie 


Identifies the movie so that it can be referenced 

Plays the movie in a continuous loop 

Displays a popup menu when a user right-clicks the player 
Names the movie so that it can be referenced 

Starts the player when the page loads 


Sets the playback quality of the movie; low values favor 
playback speed over display quality; high values favor display 
quality over playback speed 


Defines how the movie clip is scaled within the defined 
space; a value of showall makes the entire clip visible in 

the specified area without distortion; a value of noborder 
scales the movie to fill the specified area without distortion 
but possibly with some cropping; a value of exact fit makes 
the entire movie visible in the specified area without trying to 
preserve the original aspect ratio 


Sets the appearance of the player against the page 
background; a value of window causes the movie to play 
within its own window; a value of opaque hides everything 
behind the player; a value of transparent allows the page 
background to show through transparent colors in the player 


HTML 635 
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The Flash player can act as a fallback for older browsers that don’t support HTML 5 
by nesting the object element within the audio or video element. The following code 
demonstrates how the Flash video from the cp_dance.swf file can be set as a fallback 
video for browsers that can’t play either the cp_dance.mp4 or cp_dance.webm files 
using a native media player: 


<video controls> 
<source src="cp dance.mp4" type="video/mp4" /> 
<source src="cp dance.webm" type="video/webm" /> 
<object data="cp_ dance.swf" 
type="application/x-shockwave-flash" 
width="320" height="240"> 
<param name="movie" value="cp dance.swf" /> 


To hide the Flash player, <param name="quality" value="high" /> 
Sabuno niin etree <p>You must have the Flash Player to play 
valuesito 0: the video clip</p> 
</object> 
</video> 


Note that within the object element is a final fallback message for users with browsers 
that cannot play the video clip in any of the formats. 

Maxine decides against providing a Flash version of the ceiling dance movie 
because she feels that the browser support for HTML 5 video is sufficient for users of 
her website. 


Embedding Videos from YouTube 


The biggest supplier of online videos is YouTube with over 1 billion users and 4 billion 
views per day. YouTube videos are easy to embed in your web page using YouTube’s 
HTML 5 video player, which supports a wide variety of video formats and codecs 
including H.264, WebM VP8, and WebM VP9. 

To share a YouTube video, bring up the video on the YouTube site and click the Share 
button below the video player. YouTube provides options to post a hypertext link to the 
video to a multitude of social media sites or to share the link via email. To embed the 
video within your website, click Embed, which brings up a preview of the embedded 
player and the HTML code you need to add to your web page. Figure 8-30 shows the 
embed options on the YouTube website for the full movie version of Royal Wedding. 


Figure 8-30 Embedding a YouTube video 


HTML code for 
embedding 
YouTube video 


Embed Video 


cory 


options for embedding 


the video clip and 
player controls 


preview of the 
YouTube video 


Source: YouTube, LLC 
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The general code for the embedded player is 


<iframe width="value" height="value" src="url" 
frameborder="0" allowfullscreen> 
</iframe> 


where url provides the link to the YouTube video, while the width and height 
attributes define the dimensions of the player embedded on your web page. The 
f£rameborder attribute sets the width of the border around the player in pixels. The 
allowfullscreen attribute allows the user to play the video in fullscreen mode. 
Finally, the iframe element itself is used to mark inline frames, which are windows 
embedded within the web page that display the content of another page or Internet 
resource. Please note that any videos submitted to YouTube are still subject to copyright 
restrictions and might be removed if those restrictions are violated. 


HTML 5 Video Players 


Rather than using your browser's native video player, you can use one of the many 
commercial and free HTML 5 video players on the market. Unlike plug-ins, which are 
applications distinct from your browser, an HTML 5 video player works within your 
browser with CSS and JavaScript files to present a customizable player that can be 
adapted to the needs of your business or organization. The YouTube player is one example 
of an HTML 5 player in which YouTube provides both the player and a hosting service 

for the video content. Some of the other popular HTML 5 video players include the 
following: 


¢ JWPlayer (www.jwplayer.com) A popular commercial player that supports both 
HTML 5 and Flash video. A free non-commercial version is also available. 

¢ VideoJS (www.videojs.com) A free player that works with the popular WordPress 
HTML framework. VideoJS is extremely customizable and provides support for 
captions and subtitles. 

¢ Flowplayer (flowplayer.org) Originally marketed as a Flash player, Flowplayer is 
a commercially licensed audio and video player, payable as a one-time fee for 
perpetual use. 

¢ Kaltura Player (p/ayer.kaltura.com) A free open-source video player that can be 
customized with user-created player controls and skins to match the design of one’s 
website. 

¢ Wistia (wistia.com) An HTML 5 video player focused on business needs and 
applications. 


Any of these video players and many others can cover your basic needs. As your 
company or organization grows, you may find that you will need the professional service 
and quality of a licensed-based player with either a one-time or annual subscription. 
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Q 


Problem Solving: Tips for Effective Web Video 


Web video is one of the most important mediums for conveying information and 
advertising products and services. With inexpensive hardware and sophisticated video 
editing software, almost anyone can be a movie producer with free, instant distribution 
available through the web. However, this also means you have a lot of competition, 
making it hard to get noticed; it is essential that your videos be polished and 
professional. Here are some things to keep in mind when creating a video for the web: 


PROSKILLS , 


¢ Keep it short. Studies have shown that web users have an attention span of about 
4 seconds. If they don’t receive valuable information within that time, they will go to 
a different site. This means your video must get to the point quickly and keep users’ 
attention. Also recognize that most users will not watch your entire video, so make 
your key points early. 

¢ Keep the image simple. Your video will probably be rendered in a tiny frame, 
so make your content easier to view by shooting close-ups. Avoid wide-angle 
shots that will make your subject even smaller to the user’s eye. Avoid complex 
backgrounds and distracting color schemes. 

¢ Keep the human element. Eye-tracking studies have shown that people naturally 
gravitate to human faces for information and emotional content. Use tight shots in 
which the narrator speaks directly into the camera. 

e Use effective lighting. Light should be projected onto the subject. Avoid relying solely 
on overhead lights, which can create distracting facial shadows. Video compression 
can result in loss of detail; thus, make sure you use bright lighting on key areas to 
highlight and focus users’ attention on the important images in your video. 

¢ Follow the rule of thirds. Avoid static layouts by imagining the frame divided into 
a 3 x 3 grid. Balance items of interest along the lines of the intersection in the 
grid rather than centered within the frame. If interviewing a subject, leave ample 
headroom at the top of the frame. 

e Avoid pans and zooms. Excessive panning and zooming can make your video appear 
choppy and distorted, and unnecessary movement slows down the video stream. 


Finally, consider investing in professional video services that can storyboard an idea for 
you and that have the experience and expertise to create a finished product that will 
capture and keep the attention of users and customers. 


Maxine is pleased with the work you have done embedding the dance sequence 
video in the Royal Wedding page. In the next session, you will explore how to make 
your websites come alive with transitions and interactive animation. 
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REVIEW 


Session 8.2 Quick Check 


1. 


What attribute do you add to the video element to display the dickens.png file 
as a preview of the video clip? 

a. preview = "dickens.png" 

b. src = "dickens.png" 

c alt = "dickens.png" 

d. poster = "dickens.png" 


. Provide the code to insert a subtitle track named “Spanish Version” using the 


track text in the spanish.vtt file. 

a. <caption src="spanish.vtt" /> 
b. <subtitle src="spanish.vtt" /> 
c. <track src="sSpanish.vtt" /> 

d. <video caption="spanish.vtt" /> 


. Provide the code for a track cue in the WebVTT language with the name 


“Intro” and spanning the time interval from 1 second to 8.3 seconds. 
a. Intro 
00:01.000 --> 00:08.300 


b. Intro 

l) == 5) 85.3 
c. Intro 

Start: 00:01.000 End: 00:08.300 
d. Intro 


Start: 1s End: 8.3s 


. Provide WebVTT caption attributes to place the caption of the video window 


with the caption text left-aligned. 

a. line: 1 position: top align: left 
b. top: 0% left: 0% text-align: left 
c. line: 0% position: 0% align: start 
d. top: 0 left: O align: start 


. Provide a style rule to display cue text in a 1.3em cursive font. 


a. .cue {font: 1.3em cursive; } 
b. .cue {font: 1.3em cursive; } 
c. :cue {font: 1.3em cursive; } 
d. ::cue { font: 1.3em cursive; } 


. Provide the code to mark the cue text “It was the best of times” as belonging to 


the voice of the narrator. 

a. <v narrator>It was the best of times ..</v> 

b. <caption src="narrator">It was the best of times</caption> 
c. <narrator>It was the best of times</narrator> 

d. <track type="narrator">It was the best of times</track> 


. Provide the code to display text in the narrator voice with a white font. 


a. :cue(v[voice=narrator]) {color: white; } 
b. .cue(v[voice=narrator]) {color: white; } 
c. ::cue(v[voice=narrator]) {color: white; } 
d. cue(v[voice=narrator]) {color: white; } 


8. YouTube videos are embedded within which element? 


a. plugin 
b. ytube 
c. object 
d. iframe 
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Session 8.3 Visual Overview: 


The transition style defines 
The initial state styles the properties being changed, 
define the object’s the duration of the change, 
appearance before and a timing function for the 
the transition. rate of change. 


nav#topLinks a { 
color: rep(255, 255; 255); 
font-size: lem; 
text-shadow: rgba(0, 0, 6, 1) ipx -1px 1px; 
transition: color 1.5s ease-in 0.55; 
font-size 2s ease, 
text-shadow 2s Linear; 


The transition style creates 
a transition between an initial 
state and an end state. 


nav#topLinks a:hover { 
font-size: 3em; 
color: rgb(255, 183, 25)35 
text-shadow: rgba(0, 0, 0, 0.5) 15px -3px 8px; 


Prior to the hover event, During the hover event, the At the end of the transition, 
the browser displays the browser transitions between the the browser displays the 
initial state style. initial state and end state style. end state style. 


movies actors movies actors 


0 sec 0.5 sec 1 sec 1.5 sec 2 sec 


the object’s appearance over a 2-second duration 


The end state styles define The transition in styles occurs 
after the transition. during the hover event. 
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Transitions and Animations 


Each key frame has 
a progress value 


The spin animation 


Aname of “spin” 
is assigned to the 


The @keyframes rule 
defines the key frame styles 
and a style rule. used in an animation. animation. 


rotates the video 
player. 


@keyframes ee 


0% {transform: rotate(@deg) ;} 

23% {transform: rotate(Odeg) ;} 

28% {transform: rotate(90deg) 3} 
39% {transform: rotate(9@deg) ;} 
A2% {transform: rotate(180deg) ;} 
68% {transform: rotate(180deg) ;} 
72% {transform: rotate(270deg) ;} 
90% {transform: rotate(270deg) ;} 
9A% {transform: rotate(360deg) 5} 
100% {transform: rotate(360deg) ;} 


} i spin animation is ae) 


Linear timing applies 
the transition ata 
constant rate. 


to the video element. 


video { 
animation: spin 104.04s Linear infinite; 


} 


The animation lasts 
104.04 seconds. 


input#rotateVideo:checked~video { 
animation-play-state: running; 


} 


jinput#rotateVideo: not(:checked)~video|{ 
animation-play-state: paused; 


Source: Archive.org 


The animation style The animation-play-state A value of “infinite” 
applies a key frame style defines whether the causes the animation 
animation to an object. animation is running or is paused. to run continuously. 
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Creating Transitions with CSS 


In this session, you explore how to use CSS transitions and animations to add 
movement and action to your websites without relying on video files or external 
plug-ins. You start by examining how to create a CSS transition. 


Introducing Transitions 


A transition is a change in an object's style from an initial state to an ending state, 
usually in response to an event initiated by the user or the browser. You have already 
worked with this type of effect starting in Tutorial 2 when you employed the hover 
pseudo-class to change the style of a hypertext link in response to the user moving 
the mouse pointer over a hypertext link. However, the hover effect is instantaneous 
with no intermediate steps. If the background color of the link were to change from 
white to black, there is no instant in which the background is gray. A transition on the 
other hand, slows down that change and provides intermediate styles so that a white 
background gradually changes into black, passing through different shades of gray 
(see Figure 8-31). 


Figure 8-31 Transition from an initial state to an end state 


initial state end state 


no transition in color between the initial and end states 


intermediate states 


en 


initial state end state 


gradual transition in color between the initial and end state 


To create this type of transition, you employ the following transition style 
transition: property duration; 


where property is a property of the object that changes between the initial and end 
states and duration is the transition time in seconds or milliseconds. The following 

style rules use the transition style to create a transition for the background style as 
the hypertext link goes from an initial state to an end state (hovered) over a 4-second 


interval: 
i - | 
background: white; 
To specify a time in aoler: black: 


milliseconds, use the 


aera transition: background 4s; 
ms” unit. } 
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a:hover { 
background: green; 
color: white; 


} 


In this example, the background color gradually changes from white to light green and 
then progressively to darker shades of green. This transition happens over the 4-second 
transition, during which the intermediate states showing the changes in color are 
displayed (see Figure 8-32). 


Applying a transition to the background 


O sec 1 sec 2 sec 3 sec 4 sec 
initial state} movies movies movies nitesul-) | Jend state 
background: white; background: green; 
color: black; color: white; 
transition: background 4s; 
TRY.IT Note that only the background changes in the intermediate states. The text color 


stays black until the end state is reached because the color property is not included 
You can explore the CSS : age ag: : 
cansuonmealeusigadie in the transition. To apply the transition to more than one property, enter the properties 
demo_transition.html file in and their duration times in the following comma-separated list: 
SHAR WOM transition: background 4s, color 4s; 

In this example, the background color changes gradually from white to dark green at the 

same time that the font color changes gradually from black to white (see Figure 8-33). 


Figure 8-33 Applying a transition to the background and text color 


O sec 1 sec 2 sec 4 sec 

L i Mf i Mf i i if > 

T T T T T T T T 

initial state] movies movies movies movies hile) |end state 
background: white; background: green; 
color: black; color: white; 
transition: background 4s, 
color 4s; 


The duration values for multiple properties does not need to be the same: one 
property could change over a 4-second interval while another property might change 
over 3 seconds (in which case it would reach its end state a full second before the 
other property). 

Rather than writing each property individually, you can apply the transition to 
all properties by using the keyword all. Figure 8-34 shows a transition applied 
to all of the properties that change between the initial and end states, creating an 
effect in which the object changes background, text color, and rotates 90° over a 
4-second interval. 
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Figure 8-34 Applying a transition to background, text color, and rotation 


You can also set the 
properties affected by 
the transition and their 
duration using the 
transition-property 
and transition- 
duration styles. 


You can also define the 
timing-function using 
the transition-timing- 
function property. 


INSIGHT 


0 sec 1 sec 2 sec 3 sec 
f t t t t t 
T 


initial state] movies end state 


background: white; background: green; 
color: black; color: white; 

transform: rotate(Odeg); transform: rotate(90deqg); 
transition: all 4s; 


In general, it is more efficient to explicitly list the properties that are changing rather 
than using the all keyword; otherwise, the browser must keep track of all of the style 
properties to determine which ones are changing and which are not. 


Properties Affected by Transitions 


Not every property is a candidate for the transition style. A general rule of thumb is 
that, if the property allows for an intermediate value between its initial and end states, 
it can be used in a transition. Your browser can calculate an intermediate value for 
properties such as width, height, color, or font size. However, the following style rule 
can't be used in a transition because there is no in-between state between no display 
and a block display. Either the image is displayed or it is not. 

div img { 

display: none; 
} 


div:hover img { 
display: block; 
} 


To create an effect where an object gradually comes into view, you would apply 
the transition to the object's opacity, changing the object from completely transparent 
(opacity = 0) to completely opaque (opacity = 1). 


All current browsers support the transition style, but if you need to support older 
browsers you should include the following browser extensions: 


-ms-transition: background 4s; 
-o-transition: background 4s; 
-moz-transition: background 4s; 
-webkit-transition: background 4s; 
transition: background 4s; 


In this session, you use the transition style without the browser extensions. 


Setting the Transition Timing 


The speed of the transition does not need to be constant; it can vary, with some parts of 
the transition occurring at a faster rate than others. To define the varying speed of the 
transition, add the following timing- function value to the transition style 


transition: property duration timing-function; 
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where timing-function is one of the following keywords: 
° ease: (the default) The transition occurs more rapidly at the beginning and slows 
down near the end 


® ease-in: The transition starts slowly and maintains a constant rate until the finish 

® ease-out: The transition starts at a constant rate and then slows down toward the 
finish 

® ease-in-out: The transition starts slowly, reaches a constant rate, and then slows 
down toward the finish 


¢ linear: The transition is applied at a constant rate throughout the duration 


TRY IT Figure 8-35 compares the linear, ease-in, and ease-out timings when applied to a 
VERE Cea 4-second transition in the background color. The linear timing changes the color at a 


different transition timings constant rate, the ease-in timing changes the background slowly at first and rapidly 
using the demo_timing at the end, and the ease-out timing does the opposite with the most rapid change 


TUT aE occurring in the first seconds. 
demo folder. 


Figure 8-35 Comparing transition timings 


transition: background 4s linear; 


> 


transition: background 4s ease-in; 


O sec : sec sec 3 sec 4 sec 
L | , 
T T T 


: 


transition: background 4s ease-out,; 


0 sec : sec ; sec 2 sec 4 sec 
L J 
T T 


> 


Another way to visualize a timing function is as a graph, which can show the 
progress of the transition vs. the duration. Figure 8-36 charts the five timing functions 
where the vertical axis measures the progress of the transition toward completion and 
the horizontal axis measures the duration. For example, the linear timing is expressed 
as a straight line because the transition occurs at a constant rate while the other timings 
contain intervals where the rate of change slows down or speeds up. 


0 sec 1 sec sec 3 sec 4 sec 
L i | i 
T T T T 
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Figure 8-36 Graphing the transition timings 


final state 


initial state 


time 


ease-in ease-out 


ease-in-out linear 


The graphical representation of the timing function is the basis of another measure of 
transition timing using the following cubic-bezier function 


cubic-bezier(n, n, n, n) 


a NA e eee where the n parameter values define the shape of the timing curve. Without going into 
You can explore timings the detail about the math behind Cubic Bézier curves, the advantage of this approach is 
using a cubic-bezier that you can define a wide variety of timings, including timings in which the transition 
function with the demo_ can stop, reverse itself, and then go forward again to its end state. Figure 8-37 shows 


cubic.html file in the 


one such timing using the transition 
html08 » demo folder. 


transition: background 4s cubic-bezier(0, 2, 1, -1) 


in which the object’s background changes from white toward green and then back 
toward white again before reaching its final state of dark green. 


Figure 8-37 A cubic-bezier timing 


end state 
A 
cubic-bezier(0, 2, 1, -1) 
initial state : 5 
time 


initial state CC C@ ¢€ << end state 


transition: background 4s cubic-Bezier(0, 2, 1, -1); 


O sec 1 sec 2 sec 3 sec 4 sec 
I 1 i i 1 1 — 
T T T T T T 
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You can generate your own Cubic Bézier curves using the graphing tool at 
cubic-bezier.com. 


Delaying a Transition 


A transition does not need to start immediately after the event that triggers it. By adding 


Volitcanialeormlefinethe the following delay value to the transition style you can delay the start of the 
timing-function using transition 

the transition-delay a P Por : 

property transition: property duration timing-function delay; 


where delay is measured in seconds or milliseconds. The following style creates a 
4-second transition for the background style and a 2-second transition for the text color 
that starts after a 2-second delay (see Figure 8-38): 


transition: background 4s linear, 
color 2s ease-out 2s; 


Figure 8-38 Delaying a transition 


O sec 1 sec 2 sec 3 sec 4 sec 
L it i ih i i i J i ioe 
T T T T T T T T T 
initial state] movies movies movies movies Hiei) |end state 
background: white; background: green; 
color: black; color: white; 


transition: background 4s linear, 
color 2s ease-out 2s; 


TRY. IT. By using a transition delay you can create interesting effects in which your 


Toe transitions start and end at different times. 


delays with the demo_ 
delay.html file in the 
html08 » demo folder. 


Creating a Hover Transition 

Now that you have reviewed the CSS styles for creating transitions, Maxine wants to 
apply a transition effect to the navigation list at the top of the Royal Wedding page. 
When the user hovers the pointer over the items in the navigation list, she wants the 
links to appear to jump out of the page, increasing in size as they move “toward” the 
reader. Before writing the transition styles, you must first define styles for the initial 
and end states of these links. 


To define the initial and end state for the navigation links: 


D 1. If you took a break after the previous session, make sure the ep_royal.html 
file is open in your editor. 


BD 2. Directly above the closing </head> tag, insert a link to the cp_animate.css 
style sheet file. 


BD 3. Save your changes to the workbook and then use your editor to open the 
cp_animate_txt.css file from the html08 > tutorial folder. Enter your name 
and the date in the comment section of the file and save it as ep_animate.css. 
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BD 4. Go to the Transition Styles section and insert the following style rule that 
defines the initial state of hypertext links in the navigation list: 


nav#topLinks a { 
Giouleigg sacin(ASS, ABS, AIS) F 
font-size: lem; 
letter-spacing: Oem; 
text-shadow: rgba(0, 0, 0, 1) 1px -1lpx 1px; 


} 


BD 5. Next, add the following style rule that defines the end state for those links in 
response to the hover event: 


nav#topLinks a:hover { 
CUloieg ise (ASS, als, A) 7 
font-size: 3em; 
letter-spacing: 0.1lem; 
text-shadow: rgba(0, 0, 0, 0.5) 15px -3px 8px; 


} 


Figure 8-39 shows the style rules for the initial and end states. 


Figure 8-39 Style rules for the initial state and end state 


nav#topLinks a { 


color: reb(255, 255, 255); 
initial state displays the previa seen ag Ete , »§ 
Z e Tont-size: lem; 
hypertext links in white LBREeRC KORRES (een 
with a small text shadow SeAhe REentioe Ee 
text-shadow: rgba(@, ©, ©, 1) ipx -1px ipx; 


nav#topLinks athover { 

end state displays the color: rgb(255, 183, 25); 

hypertext links in light J font-size: 3em; 

orange with a larger font letter-spacing: 9.1lem; 

and a larger text shadow text-shadow: rgba(0, ©, ©, ©.5) 15px -3px 8px; 


D 6. Save your changes to the style sheet and then reopen the cp_royal.html file 
in your browser. 


D 7. Hover your mouse pointer over links at the top of the page and verify that 
the hover event causes the style of the links to change. See Figure 8-40. 
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Effect of the hover event on the links at the top of the page 


movies actors directors genres. find 


initial state 


actors directors genres find 


end state 


Sources: openclipart.org; Archive.org 


TRY_IT The links change instantaneously from the initial state to the end state and the 


Transitions canbe done in effect that Maxine wants to achieve of links jumping out of the page is lost. Add the 
incremental steps using the transition property to slow down the transition from initial to end state for the 


steps () function. Explore color, font-size, letter-spacing, and text-shadow properties. 
how to step through 


transitions using the 

demo_steps.html file in the 

Se ee idee To define styles for the navigation links: 

BD 1. Return to the cp_animate.css file and, within the style rule for the 
nav#topLinks a selector, add a new line containing the text transition: to 
insert the transition style. 


Maxine wants you to add a different transition method to each of the four 
properties that are changing. 


D 2. Within the transition style, add color 1.5s ease-in 0.5s, which applies an 
ease-in transition to the change in the color property with a duration of 1.5 
seconds after a half-second delay. 


D 3. To the transition style, add font-size 2s ease, which applies a 2-second 
transition to the change in font size. 


D 4. Add letter-spacing 2s ease-out, which applies a 2-second ease-out 
transition to the change in letter spacing. 
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BD 5. Complete the transition style by adding text-shadow 2s cubic-bezier 
(0.6, 0, 0.8, 0.5);, which applies a 2-second transition to the 
text - shadow property using the cubic-bezier function. 


Figure 8-41 highlights the transition style. 


Figure 8-41 Setting the transition styles values 


nav#topLinks a { 
color: rgb(255, 255, 255); 


font-size: lem; 


1.5-second transition with 
the ease-in transition and 
a half-second delay 


letter-spacing: Oem; 
text-shadow: rgba(0, ©, 0, 1) 1px -1px ipx; 
transition: color 1.5s ease 0.55, 


font-size 25 ease, 
letter-spacing 2s ease-out, 
text-shadow 2s cubic-bezier(0.6, 0, 0.8, 0.5); 


2-second transition 
with the ease timing 


2-second transition 
with the ease-out 
timing 


2-second transition using 


a Cubic Bezier function 


D 6. Save your changes to the style sheet and then reload cp_royal.html in your 
browser. 


D 7. Hover the mouse pointer over the links in the top navigation list and 
verify that each link changes state over a 2-second duration. Note that the 
transition works in both directions, repeating the transition in reverse as you 
move the mouse pointer away from the links. 


Figure 8-42 shows the change in the hypertext link over the 2-second 
duration of the transition. 
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Figure 8—42 Running the transition 


movies actors directors genres find 
initial state: 0 sec 


movies actors directors genres find 
end state: 2 sec wi 


Source: Archive.org 
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TRY_IT 


To explore asymmetric 
transitions, open the 
demo_asym.html file from 
the html08 » demo folder. 


INSIGHT 


As useful as they are for adding visual effects to a website, transitions have several 
limitations: 


¢ Transitions can only be run when a CSS property is being changed, such as during 
the hover event. You cannot design a transition to run automatically when the 
page loads. 

¢ Transitions are run once. You can’t have a transition loop repeatedly. 

e You can define the initial and end states of the transition but you can’t define the 
styles of the intermediate states. 


To overcome these limitations, you can create an animation. 


Creating an Asymmetric Transition 


By default, a CSS transition is a symmetric transition because the transition going 
from the initial state to the end state is the reverse of the transition going from the 
end state back to the initial state. Thus, a text color that goes from red to blue as the 
mouse moves over an object during the hover event will go from blue back to red as 
the mouse moves away. 

To create an asymmetric transition involving different transitions in the two 
directions, you must define transitions for both the initial and end states. For example, 
with the hover event you would create two transition styles: 


a {transition: properties} 
a:hover {transition: properties} 


The style rule for the a selector is applied when the mouse moves away from the 
page object and the style rule for the a: hover selector is applied when the mouse 
moves toward and over the page object. Note that the two transitions can involve 
totally different effects and durations. One transition might involve changes to font 
size and color while the other transition might only modify the background color. One 
transition can take place over a span of 2 seconds while the other might take 4 seconds. 


Animating Objects with CSS 


Animation is a technique of creating the illusion of movement by displaying a sequence 
of changing images, known as key frames, in rapid succession. The brain interprets 

the rapidly changing key frames not as distinct images but rather as a single image in 
motion. CSS replaces the concept of key frame images with key frame styles that are 
applied in rapid succession to a page object. While a transition is limited to two style 
rules defined at the initial and end states, an animation can contain multiple styles 
defined for each key frame. 


The @keyframes Rule 
To define a sequence of key frames in CSS, apply the following @keyframes rule 


@keyframes name { 
keyframel {styles;} 
keyframe2 {styles;} 


} 
where name provides the name or title of the animated sequence, keyframe1, 
keyframe2, and so on defines the progress of individual key frames, and styles 


are the styles applied within each key frame. The keyframe1, keyframe2, and so on 
values are expressed as percentages where 0% indicates a key frame at the start of the 
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sequence and 100% represents the sequence’s last frame. The 0% and 100% values can 

also be replaced with the keywords from and to. 

Key frames can be used to move objects across the page as in the following 

@keyframes rule that traces out an object's flight path (see Figure 8-43). 

@keyframes flight { 

from {left: Opx; top: Opx;} 
5% {left: 50px; top: 80px; 
10% {left: 70px; top: 80px; 
20% {left: 90px; top: 25px; 
to {left: 60px; top: 10px; 


} 


Figure 8-43 A path animation over a 10-second duration 


(50, 80) (70, 80) 
© a 
: 5 / 
O sec. 0.5 sec. 1 sec. 2 sec. 10 sec. 


The pace at which the object moves through this path is determined by the 
percentages assigned to each key frame, allowing the same animation to be run at any 
speed by changing the total duration of the sequence. With the 10-second duration 
shown in Figure 8-43, the object would take 2 seconds to reach the (90, 25) coordinate 
and 8 more seconds to complete the circuit to the (60, 10) point. If the total duration 
were 20 seconds, the (90, 25) point would be reached after 4 seconds and 16 more 
seconds would be required to reach the last point. 

Each pair of key frames can be treated as a transition with the browser providing the 
in-between styles, such as in the rainbow animation shown in the following code: 


@keyframes rainbow { 
0% {background: red; } 
50% {background: green; } 
100% {background: violet; } 


} 


Figure 8-44 shows the frames of the rainbow animated sequence in which the key frames 
define the background color at the 0%, 50%, and 100% mark while the in-between colors 
are added by the browser to create a smooth transition from one key frame to the next. 
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Figure 8-44 Transitions between key frames 


key frame transition colors key frame transition colors key frame 


0% {background: red;} 50% {background: green;} 100% {background: violet;} 


To specify the timing between one current key frame and the next, add the following 
animation-timing-function to the key frame style rule 


animation-timing-function: type; 


where type is ease (the default), ease-in, ease-out, ease-in-out, linear, or the 
cubic-bezier function. Note that any timing value entered for the last key frame is 
ignored because there are no key frames to transition to. 

Now that you have seen how to write the code for an animation, you will create an 
animated sequence for the Royal Wedding page. The illusion of Fred Astaire dancing 
on the ceiling was achieved by placing Astaire within a rotating set with a fixed camera 
mount. Maxine wants to remove this illusion by rotating the video player so that Astaire 
always appears at the bottom of the video frame. First, define an animation named 
“spin” that rotates an object through one complete revolution. 


To create the spin animation: 
D 1. Return to the cp_animate.css file in your editor. 


BD 2. Scroll down to the Key Frame Styles section and insert the following 
@keyframes rule to define the spin animation: 


@keyframes spin 


{ 


0% {transform: rotate (0deg) ;} 
100% {transform: rotate (360deg) ;} 


} 


Figure 8-45 highlights the initial code for the spin animation. 


Figure 8—45 Defining animation key frames 


name of animation 


start the object 
animation with 
no rotation 


@keyframes spin { 
0% {transform: rotate (@deg) ;} 
100% {transform: rotate(360deg) 3} 


end the object 
animation with 


360° of rotation 


BD 3. Save your changes to the style sheet. 


Now that you have defined the animation sequence, you apply it to the video player. 
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Applying an Animation 


A key frames animation is applied to an object using the following animat ion-name 
and animation-duration properties 


animation-name: keyframes; 
animation-duration: times; 


where keyframes is a comma-separated list of animations applied to the object using 
the names from the @keyframes rule and times are the lengths of each animation 
expressed in seconds or milliseconds. The following style rule applies the rainbow 
animation defined earlier to the web page body, creating an effect where the page 
background changes from red to green to violet over an interval of 5 seconds. 


body { 
animation-name: rainbow; 
animation-duration: 5s; 


} 
Figure 8-46 describes other CSS properties used to control the behavior and style of the 


animation. 
Figure 8-46 Animation properties 

Property Description 

animation-name = keyframes Assigns the keyframes animation to the object 

animation-duration = time Sets the length of the animation in seconds or milliseconds 
(default = Os) 

animation-timing-function = Defines the default timing between key frames in the 

ease |ease-in|ease-out | animation (default = ease) 

ease-in-out|linear | 

cubic-bezier(n,n,n,n) 

animation-delay = time Sets the delay time in seconds and milliseconds before 
animation is started (default = Os) 

animation-iteration-count = Specifies the number of times the animation is played, where 

value| infinite value is an integer and infinite repeats the animation 
without stopping (default = 1) 

animation-direction = Defines the direction of the animation, where normal plays 

normal | reverse|alternate| the animation as defined in the @keyframes rule, reverse 


giher ace Pevenae reverses the order, alternate plays the animation in the 


normal direction followed by the reverse direction (for 
multiple iterations), and alternate-reverse plays the 
animation in reverse direction followed by normal direction 
(default=norma1) 


animation-fill-mode = Defines what styles from the animation are applied to the 

none |backwards|forwards|both object outside the time it is running, where none does 
not apply any styles, backwards applies the styles from 
the first key frame, forwards applies the styles from the 
last key frame, and both applies styles in both directions 
(default=none) 


animation-play-state = Defines whether the animation is running or paused (default 
running |paused = running) 
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The following style rule applies to two animations applied to the img element: 
img { 
animation-name: rainbow, spin; 
animation-duration: 6s, 2s; 
animation-timing-function: ease-in, linear; 
animation-iteration-count: 1, 3; 


} 


The rainbow animation is applied for 6 seconds using ease-in timing between the key 
frames and lasting 1 iteration. The spin animation is applied for 2 seconds using linear 
timing and repeated three times. 

All of the animation properties can be combined into the following shortcut 
animation style 


animation: name duration timing-function delay iteration-count 
direction fill-mode play-state 


where the name, duration, timing-function, and so on values match the values for 
the corresponding properties listed in Figure 8-46. The animation name must be listed 
first, then the other properties can be listed in any order; except, if both a duration and 
a delay time are specified, the first time value is assumed to refer to the duration and 
the second to the delay. Omitted values are assumed to have their default value. For 
example, the following style plays the rainbow animation for 4 seconds using linear 
timing, repeating that animation twice: 


animation: rainbow 4s linear 2; 


You can support older browsers by using browser extensions. Thus, the preceding 
style could be entered as: 


-ms-animation: rainbow 4s linear 2; 
-O-animation: rainbow 4s linear 2; 
-moz-animation: rainbow 4s linear 2; 
-webkit-animation: rainbow 4s linear 2; 
animation: rainbow 4s linear 2; 


In this session, you use the animation styles without browser extensions. 

Once an animation has been defined and applied to an object, it will run 
automatically when the page is loaded. Apply the spin animation to the video player 
for 4 seconds using linear timing and set the iteration count to infinite so that the video 
player spins continuously. 


To apply the spin animation: 


BD 1. Scroll down to the Animation Styles section within the cp_animate.css file 
and insert the following style rule: 


video { 
animation: spin 4s linear infinite; 


Figure 8-47 highlights the code used to spin the video player. 
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continuously 
repeat the 
animation 


Animation Styles duration of 
animation 


applies the animation 
to the video player 


name of animation 


timing function 
between key frames 


BD 2. Save your changes to the style sheet. 


BD 3. Reload the cp_royal.html file in your browser. Verify that when the page 
loads, the animation rotating the video player starts automatically. See 
Figure 8-48. 


Figure 8-48 Rotating the video player 


_Cingrna Pensa © 2021 English (LS) 
Source: Archive.org 


Trouble? Videos played on some mobile devices will automatically be 
displayed in full screen mode so that you cannot see any animation effects 
on the video player. 


Rather than having the video player rotate continuously when the page loads, 
Maxine wants the spin animation to be initiated and paused by the user. You can do 
this using web form controls. 
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Stepping between Key Frames 


To create a smooth transition between states or key frames, the browser will 
automatically generate a set of intermediate frames. You can specify the number of 
intermediate frames using the following steps () function 


- 
aS 
© 
_— 
2) 
Zz 
— 


steps (number) 


where number is the number of frames between each key frame. The steps () function 
is useful when you want to apply a specific number of discrete frames. The following 
style applies the clock animation for a duration of 60 seconds broken into 60 frames, 
each of which would occupy 1 second of time: 


animation: clock 60s steps(60) ; 


One application of the steps () function is to create animated images, known as 
sprites, made of several frames shown in rapid succession at timed steps. You can 
explore sprites in Case Problem 2 at the end of this tutorial. 


Controlling an Animation 


In many applications, you will not want your animation to start automatically when the 
page loads but rather in response to the user clicking a form button. You can control an 
animation using JavaScript, but for this project, you limit yourselves to a CSS solution. 

Because an animation can have two states of operation—play or pause—you can 
use a check box to control the animation. If the check box is selected the animation 
will play; if the check box is not selected the animation will be paused. First, you will 
create the check box alongside an empty label. Note that you will write the content of 
the label shortly. 


To create the animation check box: 
D 1. Return to the cp_royal.html file in your editor. 


BD 2. Scroll down to the video element and, directly before the <video> tag, insert 
the following checkbox and label elements: 


<input type="checkbox" id="rotateVideo" /> 
<label for="rotateVideo"></label> 


Figure 8-49 highlights the HTML code. 


Figure 8-49 Creating a check box and label to run the animation 


<input type="checkbox" id="rotateVideo" /> 
<label for="rotatevideo"></label> 
ideo controls poster="cp_photo2.png” 
source src="cp_dance.mp4" type="video/mp4" 
source src="cp_dance.weba" type="video/webm" 
track kinde"captions" Label=#{"Dance Captions" srce"cp_captions.vtt" default 
pocemTo play this video clip, your browser needs to 
support HTML5.</en /p 
ivideo 


BD 3. Save your changes to the file. 
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Next, you will define two style rules for the check box: one in which the check box 
is checked and other in which it is not. If the check box is checked, you want the video 
clip to be played; you do this by setting the value of animat ion-play-state property 
for the video to running as in the following style rule: 


input#rotateVideo:checked~video { 
animation-play-state: running; 


} 


Remember that this style rule only affects the animation that rotates the video player, 
it has no effect on the playing of the video itself. The style rule uses the ~ symbol as 
a sibling selector to select the video that follows the rotateVideo check box in the 
document. 

To pause the animation, you use the same selector but include the following not 
pseudo-class. You use the not pseudo-class in order to apply the animation-play- 
state property with a value of pause to the video player when the rotateVideo check 
box is not checked: 


input#rotateVideo:not (:checked) ~video { 
animation-play-state: paused; 


} 


Thus, depending on whether the rotateVideo check box is checked or not, the 
animation will either be running or paused. Add these two styles to the cp_animate.css 
style sheet. 


To create styles for animation playback: 
BD 1. Return to the cp_animate.css file in your editor. 


D 2. Directly after the style rule for the video element, insert the following style 
rule to run the animation: 


input#rotateVideo:checked~video { 
animation-play-state: running; 
} 


BD 3. Add the following style rule to pause the animation: 


input#rotateVideo:not(:checked) ~video { 
animation-play-state: paused; 
} 


Figure 8-50 highlights the style rules to run and pause the animation. 


Figure 8-50 Creating a check box and label to run the animation 


the rotateVideo 
check box is checked 


video { 
animation: spin 4s|/linear infinite; 


} 


input#rotateVideo:checked~video { 
plays the spin animation 9 }——»animation-play-state: running; 


} 


the rotateVideo check 
pooner cues input#rotateVideo:not(:checked)~video { 


animation-play-state: paused; 
} 


( pauses the spin animation 
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BD 4. Save your changes to the file and then reload the cp_royal.html file in 
p_roy 
your browser. 


BD 5. Check the check box next to the video player to start the spin animation. 
Uncheck the check box to pause the animation. See Figure 8-51. 


Figure 8-51 Using a check box to control the animation playback 


check to play the 
spin animation and 
uncheck to pause it 


2021 English (US) 


Source: Archive.org 


Maxine wants to replace the check box with a more attractive icon that displays 
the U symbol to run the animation and the ” symbol to pause the animation. The two 
symbols have the Unicode values \21bb and \270b respectively. This is where you use 
the blank label by adding text to the label displaying either the U symbol when the check 
box is not checked or the ’ symbol when the check box is checked. You will add this 
text using the after pseudo-element and content property in the following style rules: 


input#rotateVideo:not (:checked)+label::after { 
content: "\21bb"; 
} 


to add the U symbol when the check box is not checked. Then use the style rule that 
follows to insert the & symbol when the check box label is checked: 


input#rotateVideo:checkedt+label::after { 
content: "\270b"; 
} 


Add both of these style rules to the style sheet and hide the rotateVideo check box 
so that only the icons are displayed. 
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To create styles for animation playback: 
BD 1. Return to the cp_animate.css file in your editor. 


BD 2. Go to the Animation Icon Styles section and insert the following style rule to 
hide the rotateVideo check box: 


input#rotateVideo { 
display: none; 
i 


BD 3. Add the following style rule to insert the © symbol after the check box label if 
the check box is not checked: 


input#rotateVideo:not (:checked)+label::after { 
content: "\21bb"; 
} 


BD 4. Add the following style rule to insert the symbol if the check box is checked: 


input#rotateVideo:checked+label::after { 
content: "\270b"; 
} 


Figure 8-52 highlights the style rules to insert the U and © icons. 


4 
MNihtat iO} 


input#rotateVideo { 


Lo Ry Re AT EEN 
hides the rotateVideo r 
display: none; 


| ness box J 


} 


input#rotateVideo:not(:checked)+label::after f{ 
content: "\21bb"; 


@ > 
inserts the U symbol 
when the rotateVideo 

check box is not 


checked } 

. 4 

4 \ - iS . 
inserts the & symbol input#rotateVideo: checked+label::after { 
when the rotateVideo |—>»| content: "\270b"; 

| check box is checked y) } 


D 5. Save your changes to the file and then reload the cp_royal.html file in your 
browser. 


D 6. Verify that the U symbol appears at the top left of the video player. Click the 
Vicon and verify that the video player starts to rotate and the icon changes 
to &%. Confirm that as you continue to click the U and ¥ icons the animation 
alternately plays and pauses. 


Maxine wants you to modify the format of the icons to make them larger and more 
attractive. She also wants the icons to always appear above the video player. She also 
wants to make sure the icon is never obscured by the rotating video player. You can 
ensure this by setting the z-index value of the label to 2. 
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To format the play and pause icons: 
BD 1. Return to the cp_animate.css file in your editor. 
BD 2. Add the following style rule at the bottom of the file: 


label { 
background: rgb(56, 87, 119); 
border-radius: 65px; 
Crouloigg sgeiyn(Ass, 255, ASK, Wo) 
display: block; 
font-size: 35px; 
font-weight: bold; 
line-height: 50px; 
margin: 10px auto; 
position: relative; 
text-align: center; 
width: 50px; 
z-index: 2; 

} 


Figure 8-53 shows the style rules for the check box label text. 


Figure 8-53 CSS style rule for the play and pause icons 


input#rotateVideo:checked+label::after { 
content: "\270b"; 


displays the label in a } 
semi-transparent white 
font on a dark blue labél 


rounded background 


background: rgb(56, 87, 119); 
border-radius: 65px; 


displays the label colors reba(255,, 255). 295,, 0.75 
ne e label asa da splay: blonks 
font-size: 35px; 


font-weight: bold; soe eae 
line-height: 50px; 

sets the typography ek 5 3 

styles for the label margin: 10px auto; 


position: relatives places the label with 
text-align: center; relative positioning 
sets the width of the width: 50 px} 
label to 50 pixels é 
z-index: 2; 


centers the label text 
within its container 


sets the z-index to 2 so 
that the label’s contents 

always appears on top of 
the video player 


BD 3. Save your changes to the file and then reload cp_royal.html in your browser. 


D 4. Click the U and ™ icons to play and pause the animation. Figure 8-54 shows 
the revised format of the two icons. 
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Figure 8-54 Revised play and pause icons 


pause icon 


z 


Source: Archive.org 


Now that you have created controls that play and pause the spin animation, your next task 
is to revise the spin animation so that the rotating of the video player matches the rotation 
of the cage in which Fred Astaire danced. The cage was not in constant rotation during the 
dance but started and stopped as Astaire moved through each of its four sides. After studying 
the video, Maxine has determined the time intervals in which the cage rotates and the 
intervals in which it stays still. Use her figures now to revise the spin animation sequence. 


To revise the spin sequence: 


BD 1. Return to the cp_animate.css file in your editor and scroll to the Key Frames 
Styles section. 


D 2. Directly after the 0% key frame, insert the key frames: 


23% {transform: rotate (0deg) ;} 
28% {transform: rotate (90deg) ;} 


to keep the video player rotation at 0° up to 23% of the sequence and then 
gradually rotating the player from 0° to 90° in the 23% to 28% interval. 


D 3. The cage stays at 90° of rotation up to 39% of the dance sequence and then 
from 39% to 42% it rotates to 180°. Insert the key frames: 


39% {transform: rotate (90deg) ;} 
42% {transform: rotate (180deqg) ; } 


D 4. The cage stays at 180° of rotation up to 68% of the sequence and in the 
interval from 68% to 72% it rotates to 270°. Insert the key frames: 


68% {transform: rotate (180deg) ;} 
72% {transform: rotate (270deg) ; } 


D 5. Finally, the cage stays at 270° of rotation up to 90% of the sequence and 
then rotates to 360° at the 94% mark. Insert the key frames: 


90% {transform: rotate (270deg) ;} 
94% {transform: rotate (360deg) ;} 


The length of the animation needs to match the length of the video clip to 
ensure that the rotation of the video player matches the rotation of the cage 
used in the video. 


HTML 664 
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BD 6. Change the duration of the animation from 4s to 104.04s, which is the length 
of the Ceiling Dance video clip. 


Figure 8-55 highlights the new and revised code in the style sheet. 


Figure 8-55 Defining the key frames to match the video 


@keyframes spin { 
0% {transform: rotate(Odeg) ;} 
23%  #{transform: rotate(@deg) ;} 
28% {transform: rotate (90deg) ;} 
39%  {transform: rotate(90deg) ;} 
new key frames that 42%  {transform: rotate(180deg) ;} 
rotate the Mice ea 68% {transform: rotate(180deg) ;} 
at different intervals 
72%  <{transform: rotate(270deg) ;} 
90% {transform: rotate(270deg) ;} 
94%  {transform: rotate(360deg) ;} 
100% {transform: rotate(360deg) ;} 
} 
animation duration set video { 
to 104.04 seconds to animation: spi n 104 .04s Linear infinite ; 
match the length of } 
the video clip 


BD 7. Save your changes to the file. 


Your final task is to keep the animation and the video player in sync so that when 
the animation starts, the video player starts and when the animation pauses, the video 
player pauses. Because there are no CSS styles that control video playback, this task 
requires an external JavaScript program. Maxine gives you the cp_spin.js file that 
contains a JavaScript program that will play and pause the video whenever the spin 
animation runs or pauses. 


To link to the cp_spin.js file: 
BD 1. Return to the cp_royal.html file in your editor. 
D 2. Directly before the closing </head> tag, insert the following script element: 
<script src="cp spin.js"></script> 


Figure 8-56 highlights the script element in the document head. 


Figure 8-56 8-56 Using a script to keep the animation and the video in sync 


rel="stylesheet" /> 


<link href="cp_animate.css" 


script file used to start and 
pause the video playback 
in sync with the animation 


script src="cp_spin.js"></script> 
</head> 
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You need to provide instructions to the user about how to use the animation. 


BD 3. Scroll down to the paragraph directly before the rotateVideo check box and 
within the paragraph, add the following text: 


To see the dance as it appeared on the movie set, go to the start of 
the clip and click «#8635; to rotate and play the video. Click «#9995; to 
pause the rotation and the playback. 


Figure 8-57 highlights the newly added text. 


Figure 8-57 Instructions to run the animation 


p>Click the play button to view this classic dance 


sequence. To see the dance as it appeared on the movie set, go to the 
start of the clip and click &#8635; to rotate and play the video. 
Click &#9995; to pause the rotattion and the playback. 


tatiev } 
character code 
for the U symbol 


BD 4. Save your changes to the file and then reload cp_royal.html in your browser. 


BD 5. Click the U icon to start both the animation and the video player. Verify the 
rotation of the player is synchronized to the dance so that Astaire always 
appears upright within the video window. 


BD 6. Click the & icon and verify that it pauses the animation and video playback. 


Figure 8-58 shows the rotated video player in sync with the rotation of the 
movie set. 


Figure 8-58 Final version of the Ceiling Dance animation 


character code 
for the % symbol 


click to start the 
animation and the 
video playback 


video playback syncs 
with the animation 
rotating the player 


Source: Archive.org 


Trouble? Do not use the controls on the video player itself to pause or play 
the video; the animation will not sync up with the dance. 


ey HTML 5 and 
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You have completed your work on the Royal Wedding page for the Cinema Penguin 
website. Maxine is very pleased with the enhancements you have made to the page 
and feels that with the audio, video, and animation you have added, the page has really 
come alive and provided useful insight regarding how the illusion of the Ceiling Dance 
was achieved. Maxine will continue to work on developing new pages of interest for 
her website and will contact you for help on future projects. 


o 


Problem Solving: Safe Animation and Motion Sensitivity 


One area of web accessibility that is too often overlooked is the health impact 
that flashy animated effects can have on large segments of the population. For 
individuals afflicted with migraines, epilepsy, or vestibular disorders such as vertigo, 
large and rapidly changing animations can induce symptoms of nausea, headaches, 
and dizziness. Some of the most adverse reactions occur in response to large 
movement across an entire screen such as might occur with a full screen wipe of page 
content. Other areas of concern are animations involving apparent rapid motion, 
twisting in 3D space, or unexpected shifts in the direction of motion—all of which 
can leave viewers feeling disoriented. 
In designing a safe animation for all of your users, keep in mind the following 
principles: 
¢ Keep the Animation Restrained. Don't have your animation dominate the user 
experience. It should augment your design, not overwhelm it. 
© Give the User Control. Whenever possible, give users the ability to ignore or turn off 
an animated sequence. 
e Test your Page Animation-Free. Some users may need to turn off your animated 
sequences. Make sure your website is still useful and informative for them. 


All of which is not to say that animation should be eliminated from website designs. 
A well-designed animation can provide useful information to the viewer and augment 
the user experience. Good design is inviting to everyone. 


REVIEW 


Session 8.3 Quick Check 


1. Provide a style that changes the font size over a 2-second interval and the font 


color over a 3-second interval. 
a. font-size: 2sec color 3sec; 
b. transition: font-size 2s color 3s; 
c. transition: font-size/2s color/3s; 
d. animate: font-size 2s color 3s; 
2. Which timing function should you use to start a transition at a constant rate 
and then slow down toward the end state? 
a. ease-in 
b. linear 
Cc. ease 
d. ease-out 
3. Which timing function should you use for a transition that starts out rapidly 
and slows down near the end? 
a. ease-in 
b. linear 
Cc. ease 
d. ease-out 
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4. Provide the style that creates a transition on all properties over a 5-second interval 
using linear timing and a half-second delay. 
a. transition: all 5s linear 0.5; 
b. transition: all linear 5.5s; 
c. transition: all linear 4.5s; 
d. All of the above 


5. Which of the following is a way that animations differ from transitions? 
a. Animations can be run at any time 
b. Animations can be run more than once or looped repeatedly. 


c. Animations can contain Intermediate styles in addition to the initial and end 
states. 


d. All of the above 


6. Provide an animation named biggerText that sets the font size to 1em at 0% and 
2em at 100% of the animation duration. 
a. @animate biggerText { 
0% {font-size: lem; } 
100% {font-size: 2em; } 
} 
b. @keyframes biggerText { 
0% {font-size: lem; } 
100% {font-size: 2em; } 
} 
c. animate biggerText { 
0% {font-size: lem; } 
100% {font-size: 2em; } 
} 
d. keyframes biggerText { 
0% {font-size: lem; } 
100% {font-size: 2em; } 
} 
7. Provide the style property to run the biggerText animation over an interval of 4.5 
seconds. 
a. animate: biggerText 4.5s; 
b. @animation: biggerText 4.5s; 
c. keyframe: biggerText 4.5s; 
d. transition: biggerText 4.5s; 
8. Provide the style to run an animation in reverse. 
a. animation-reverse: true; 
b. animation-direction: backwards; 
c. animation: backwards; 
d. animation-direction: reverse; 


9. What value do you add to the animation style to have the animation loop 
repeatedly? 
a. loop = true 
b. stop = no 
c. infinite 
e. loop = always; 
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Coding Challenge 1 


Data Files needed for this Coding Challenge: code8-1_txt.html, code8-1_video_txt.css, 
captions8-1_txt.vtt, code8-1_styles.css, ollie.mp4, ollie.webm 


CODE 


You are working on a skateboard website that provides instruction in various skateboarding tech- 
niques. In this coding challenge you will complete a web page detailing how to perform a trick 
known as a High Ollie in which the skateboarder jumps over high obstacles. You will augment the 
page with a video of the trick being performed. See Figure 8-59. 


Coding Challenge 8-1 example page 
Learning the High Ollie 


A High Ofte as built on the principles of a basic Olke in which you slsde your front foot forward and stomp down, popping the board to get a bit of 
ur. To go higher, work im the following steps 


1. Get a good stance Place your front foot near the middie of the board and your back foot down by tail withoet hanging off the tail. Your front 
foot should be just belund the last nwo bolts on the front part of your skateboard, compiciely parallel to them 


2. Extend your feet Once vou are in a stable position, move yous front foot toward the center of your board by about nwo inches. You get htt by 
siding the front foot and the more room you leave for sliding. the higher you will go. 


Slide to the front Slide your front foot ai) the way to the nose of the board, up to the past where the board smarts to curve upward. You want 
your foot to get caught where the board starts to nse once you start executing the high ollie 


Jump! Pop the board hard, sucking your feet up with the board, and jumping higher than normal. Try to get your knees almost all the way up 
to your chest. You can rase your anme for extra lift 


Stand tall You have to have your shoulders centered on the board to keep stable. Do not hunch because that wall throw off your balance and 
reduce your height. Remembes: The kaces ase lifted up; the head is NOT pushed down! 


2 


Be smooth Your motions should be fluid and smooth with no jagged of awkward movements that will kill your momentum. Tumng u 
everything 


Keep practicing and as you become more comfostable wath the High Ollie, you wall find vourseif getnng more and mose au! 


Source: https://www.videvo.net/video/skateboarder-picnic-table-jump/3556/ 
public domain video) 


Do the following: 


1. Open the code8-1_txt.html and code8-1_video_txt.css files from the html08 > code! folder. 
Enter your name and the date in each document and save the files as code8-1.html and 
code8-1_video.css respectively. 


2. Go to the code8-1.html file in your editor. Within the head section insert a 1ink element linking 
the page to the code8-1_video.css style sheet file. 


3. Below the ordered list insert a video element with the following features: 
a. Add the controls attribute to the video element to show player controls. 


b. Add the source files ollie.mp4 and ollie.webm to the video element. Include the mime-type 
for both video files. 
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c. If the user’s browser doesn’t support HTML video, display a paragraph containing the text 
Upgrade your browser to view embedded videos. 

d. Add a track using the contents of the captions8-1.vtt file. Set the value of the kind attribute to 
captions and add the label Video Captions. 

4. Save your changes to the HTML file. 

5. Go to the code8-1_video.css file in your editor. Add a style rule for the video element that: 

a. Displays the video player as a block element, 
b. Sets the width of the player to 75%, and 
c. Sets the top/bottom margin to 10 pixels and the left/right margins to auto. 

6. Save your changes to the CSS file. 

7. Open the captions8-1_txt.vtt file in your editor. Create a cue with the label Caption going from 
3 to 6 seconds of the video and displaying the text A High Ollie during that interval. 

8. Save the file as captions8-1.vtt. 

9. Test your page in your browser, verifying that you can play the video clip of the High Ollie and 
that a caption appears from 3 to 6 seconds of the video. (Note: If you are using Google Chrome 
or Opera, you will have to upload your files to a server if you wish to see the captions.) 

10. Submit the completed file to your instructor. 


Coding Challenge 2 


Lu 
Q Data Files needed for this Coding Challenge: code8-2_txt.html, code8-2_trans_txt.css, 
© code8-2_styles.css, image01.png — image06.png 


Transitions with the hover effect can be used in image galleries to display large versions of thumbnail 
images. Figure 8-60 shows an image gallery of Renaissance sketches that are enlarged in response to 
the hover event. Use your knowledge of CSS transitions to complete this web page. 


Coding Challenge 8-2 example page 
ATUSUSKetchpad 


Source: Public Domain 
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Do the following: 


1. Open the code8-2_txt.html and code8-2_trans_txt.css files from the html08 » code2 folder. 
Enter your name and the date in each document and save the files as code8-2.html and 
code8-2_trans.css respectively. 

2. Go to the code8-2.html file in your editor. Within the head section insert a link element linking 
the page to the code8-2_trans.css file. Study the contents of the file and then save your changes. 


3. Go to the code8-2_trans.css file. At the bottom of the file create a style rule for the figure ele- 
ment during the hover event that: 


a. Sets the width to 400 pixels, 

b. Sets the z-index value to 2, and 

c. Applies the transition for the change in the width property over a 2-second interval. 
4. Create a style rule for img elements within hovered figure elements that: 

a. Sets the width to 100% 

b. Applies the drop-shadow() and grayscale() filter functions, 


c. Sets the drop shadow offset to 10 pixels in the horizontal and vertical directions and the blur 
radius to 20 pixels, 


d. Sets the blur value to 0, and 
e. Applies a transition to the change in the £ilter property over a 2-second interval. 

5. Create a style rule for £igcaption elements within the hovered figure element, that sets the 
font size to 1.2em, and applies the change in font size over a 2-second transition. 

6. Create a style rule for the #fig1 through #fig6 elements which are hovered, that rotates the 
elements to 0 degrees using the transform property, and applies a 2-second transition to all 
properties of those figures. 

7. Save your changes to the style sheet. 

8. Open code8-2.html in your browser and verify that when you hover your mouse pointer over 
any of the six images, the figures are rotated to 0 degrees, increased in size, moved on top of the 
other figure images, and the figure captions appear below the figures. 

9. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code8-3_txt.html, code8-3_anim_txt.css, 
code8-3_styles.css, image01.png — image06.png 


CODE 


Animation can be used with 3D objects to create the illusion of objects moving and spinning in 3D 
space. Figure 8-61 shows the opening page of the Artist Sketchbook web page in which six drawings 
from Renaissance masters have been combined in a 3D cube. You will use CSS animation to spin the 
cube, showing all faces of the cube during the animation. 
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Artisusketchbook 


Source: Public Domain 


Do the following: 


1. Open the code8-3_txt.html and code8-3_anim_txt.css files from the html08 » code3 folder. 
Enter your name and the date in each document and save the files as code8-3.html and 
code8-3_anim.css respectively. 

2. Go to the code8-3.html file in your editor. Within the head section insert a 1ink element that 
links the page to the code8-3_anim.css style sheet file. Take some time to review the contents of 
the file and then save your changes. 

3. Go to the code8-3_anim.css file in your editor. Several keyframe animations have already been 
created for you. Add a keyframe animation named spinCube that contains the following frames: 
a. At 0% apply the transform property with the rotateX() function set to 24deg and the rotateY() 

function set to 40deg 
b. At 50% change the value of the rotateX() function to 204deg and the rotateY() function to 220deg 
c. At 100%, change the value of the rotateX() function to 384 and the rotateY() function to 400deg 
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4. When the page is initially opened you want it to display animation of the six faces of the cube 
being assembled. Create a style rule that applies the moveFront keyframe animation to the 
#faceFront object. Set the duration of the animation to 3 seconds and set the animation- 
£i11-mode property to forwards. 

5. Repeat Step 4 for the #faceBack, #faceBottom, #faceLeft, #faceTop, and #faceRight objects using 
the moveBack, moveBottom, moveLeft, moveTop, and moveRight animations. 

6. After the cube is assembled you want it to rotate. Create a style rule that applies the spinCube 
animation to the #cube object, running the animation over a 3-second duration after a delay of 3 
seconds. Use the linear timing function and have the animation loop without ending. 

7. Save your changes to the file. 


8. Open the code8-3.html file in your browser. Verify that in the first 3 seconds the cube is assem- 
bled by moving the six faces into position and that after 3 seconds, the cube begins spinning to 
show all the faces of the cube. 


9. Submit the completed file to your instructor. 


. Coding Challenge 4 


Data Files needed for this Coding Challenge: code8-4_txt.html, code8-4_debug_txt.css, 
code8-4_styles.css, amex.png, discover.png, master.png, visa.png 


DEBUG 


You can use transitions and animations in web forms to draw your eyes to particular form elements 
or to highlight invalid form data. You’ve been given a website that uses a transition effect to highlight 
invalid credit card values; however, the transition effects and animation are not working. You will edit 
the style sheet of the page shown in Figure 8-62 to fix the problem. 


Coding Challenge 8-4 example page 
Payment Form 


eA Oo | score) 9 | QD) © Fvsal 
Se aaa, 
Credit Card Number |1234567890 
csc rus \ 
Expiration Date |—Month- =v |~Year— ¥ 


Sources: American Express; Discover Bank; MasterCard; Visa, Inc. 


Do the following: 


1. Open the code8-4_txt.html and code8-4_debug_txt.css files from the html08 > code4 folder. 
Enter your name and the date in each document and save the files as code8-4.html and 
code8-4_debug.css respectively. 

2. Go to the code8-4.html file in your editor. Within the head section insert a link element that 
links the page to the code8-4_debug.css style sheet file. Save your changes. 

3. Open the code8-4.html file in your browser. When the page opens, the h1 heading should slide 
into the page from the left and the form should drop in from the top. Neither is happening. Open 
the code8-4_debug.css file in your editor and study the code that applies the animation effect to 
the form#payment object and the h1 element. Fix any mistakes in the code that you find. 
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4. Save your changes and reopen code8-4.html in your browser. Verify that the opening of the page 
runs the drop-in and slight-right animations. 

5. When the Credit Card Number box and the CSC box receive the focus, a transition effect should 
appear that slowly adds a glowing brown shadow around the boxes. The glowing brown shadow 
appears but without a transition effect. Return to the code8-4_debug.css file in your editor. Study 
the code that applies a transition effect to the input#cardBox and input#CSC objects, and correct 
any mistakes you find in the code. 


6. Save your changes and reopen code8-4.html in your browser. Verify that when the Credit Card 
Number and CSC boxes receive the focus a transition effect appears that adds the glowing brown 
shadow to the boxes. 

7. A 3-digit number should be entered in the CSC box. If something other than a 3-digit number 
is entered, the box should wiggle back and forth to indicate invalid data. That is not currently 
happening. Return to the code8-4_debug.css file in your editor. Study the code that applies the 
transition effect to the input#csc object when invalid data is entered. Correct any mistakes in the 
code that you find. 

8. Save your changes and reopen code8-4.html in your browser. Verify that when you enter invalid 
data in the CSC box, the box wiggles back and forth to indicate that the data is not valid. 


9. Submit the completed file to your instructor. 


PRACTICE 


Review Assignments 


Data Files needed for the Review Assignments: cp_astaire_txt.html, cp_animate2_txt.css, cp_media2_txt.css, 
cp_captions2_txt.vtt, 2 CSS files, 3 PNG files, 1 MP3 file, 1 MP4 file, 1 OGG file, 1 WebM file 


Maxine has been working on new pages at the Cinema Penguin website. She has returned for help on 
a page featuring a profile of Fred Astaire. Maxine created a sound clip from one of Astaire’s songs in the 
Royal Wedding and a video clip of a dance in that movie featuring Astaire’s duet with a hat rack. She 
wants both clips embedded on the page. In addition, Maxine wants you to try a new hover transition 
for the links at the top of the page. Finally, she wants you to create an animation that displays a scroll- 
ing marquee of the Fred Astaire filmography. Figure 8-63 shows a preview of the final page. 
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movies actors directors genres tind 


3 


Biography 
Articles 

Film List 
Video Clips 
Audio Clips 
Suills 

DVD Releases 


Articles 

Top 20 Musicals 
The Great Dancers 
Broadway on Film 
Soundtracks 


Sources: openclipart.org; Dr. Macro; Archive.org 


Complete the following: 


1. Use your HTML editor to open the cp_astaire_txt.html, cp_media2_txt.css, and cp_animate2_txt.css 
files from the html08 > review folder. Enter your name and the date in the comment section of 
each file, and save them as cp_astaire.html, cp_media2.css and cp_animate2.css respectively. In 
addition, use your text editor to open the cp_captions2_txt.vtt file from the same folder and 
save it as cp_captions2.vtt. 

2. Go to the cp_astaire.html file in your editor. Insert links to the cp_media2.css and 
cp_animate2css files. Take some time to study the contents and structure of the document. 


10. 


11 


2. 


IBe 
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. Scroll down to the aside element titled “Listen up”. Directly after the introductory paragraph, 


insert an audio clip with the audio controls displayed in the browser. Add two possible source 
files to the audio clip: cp_song.mp3 and cp_song.ogg. Identify the mime-type of each audio 
source. If the browser does not support HTML 5 audio, display a paragraph with the message 
Upgrade your browser to HTML 5. 


. Scroll down to the aside element titled “In Focus” and after the introductory paragraph insert 


a video clip with the video controls enabled and display the poster image cp_poster.png. Add 
two possible sources to the video clip: cp_hatrack.mp4 and cp_hatrack.webm. Include the 
mime-type for each video source. If the user’s browser does not support HTML 5 video, display a 
paragraph with the message Upgrade your browser to HTML 5. 


. Directly after the two video sources in the video element you created in the last step, insert a 


caption track using the captions you will specify in the cp_captions2.vtt file in later steps. Give 
the caption track the label Movie Captions and set it as the default track for the video clip. 


. Save your changes to the file and then open the cp_captions2.vtt file in your text editor. Add an 


initial line to the text file indicating that this file is in WEBVTT format. 


. Add the following track cues to the cp_caption2.vtt file: 


a. A Title cue appearing in the 0.5 seconds to 5-second interval containing the text The Hat Rack 
Dance enclosed in a class tag with the name Title. Set the 1ine and align attributes for the 
caption to 10% and middle respectively to place the caption centered and near the top of the 
video window. 

b. A Subtitle cue in the 5.5- to 9-second interval with the text from Royal Wedding (1951). 
Enclose “Royal Wedding (1951)” within <i> tags to italicize it. Place the caption at the 10% 
line and align the caption text in the middle. 

c. A Finish cue displayed from the 1 minute 5 second mark to the 1 minute 11 second mark and 
containing the text See more videos at Cinema Penguin. Enclose “Cinema Penguin” within 
<i> tags and place the caption at the 80% line and 90% position with the caption text aligned 
at the end. 


. Save your changes to the file and then go to the cp_media2.css file in your editor. Within the 


Media Styles section, insert a style rule for all audio and video elements that displays them as 
blocks with a width of 95%. Center the audio and video elements by setting the top/bottom 
margins to 20 pixels and left/right margins set to auto. 


. Go to the Track Styles section and create a style rule for track cues that: a) sets the background 


color to transparent, b) adds a black text shadow with horizontal and vertical offsets of 1 pixel 
and a blur of 2 pixels, c) sets the text color to rgb(255, 177, 66), and d) sets the font size to 1.2 em 
using the sans serif font family. 

Create a style rule for track cues belonging to the Title class that sets the font size to 2em and font 
family to serif. 


. Save your changes to the style sheet and then open the cp_astaire.html file in your browser. Verify 


that you can play the audio and video clips and the layout matches that shown in Figure 8-63. 
Verify that captions are added to the video clip providing the title and subtitle of the clip at 

the start of the video and a message about Cinema Penguin at the end. (Note: If you are using 
Google Chrome or Opera, you will have to upload your files to a server if you want to see the 
captions and the styles you created for the video clip.) 

Maxine wants to create a transition for the links at the top of the page that enlarges the link text 
and moves it out and above its default position. Return to the cp_animate2.css file in your editor, 
go to the Transition Styles section and create a style rule for the nav#topLinks a selector that: 
a) sets the text color to rgb(255, 255, 255), b) adds a text shadow with the color rgba(0, 0, 0, 1), 
a horizontal offset of 1 pixel, a vertical offset of -1 pixel, and a blur of 1 pixel, and c) uses the 
transform style to apply the functions scale(1,1) and translateY (0px). 

Within the style rule you created in the last step, add a transition that applies to all of the 
properties of the selected element over an interval of 1.2 seconds using linear timing. 
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14. Create a style rule for the nav#topLinks a:hover selector that: a) sets the text color to 
rgb(255, 183, 25), b) sets the text shadow to the color rgba(0, 0, 0, 0.5) with a horizontal offset 
of 0 pixels, a vertical offset of 15 pixels, and a blur of 4 pixels, and c) uses the transform style 
with scale (2,2) and translateyY(-15px) to double the scale of the object and translate 
it-15 pixels in the vertical direction. 

15. Save your changes to the style sheet and then reload cp_astaire.html in your browser. Hover 
your mouse pointer over the links at the top of the page and verify that your browser applies a 
transition over a 1.2 second duration as each link increases in size and appears to move upward 
and outward from the page in response to the hover event. 


The list of Fred Astaire’s films has been stored within a table nested within a div element with the ID 
Marquee. The table is long and Maxine wants to only display a portion of it at a time, allowing the 
contents of the table to automatically scroll upward as in a theater marquee. To create this animated 
effect, you change the top position style of the table over a specified time interval, moving the table 
upward through the marquee. 

16. Return to the cp_animate2.css file in your editor and go to the Marquee Styles section and insert 
a style rule that places the marquee div element with relative positioning. Add a style rule for the 
table nested within the marquee div element that places the table using absolute positioning. Do 
not specify any coordinates for either element. 

17. Go to the Keyframe Styles section and create an animation named scroll with the following two 
key frames: a) at 0%, set the value of the top property to 250px and b) at 100%, set the value of 
the top property to -1300px. 

18. Go to the Animation Styles section and apply the scroll animation to the table within the 
marquee div element over a duration of 50 seconds using linear timing within infinite looping. 

19. Maxine wants the marquee to stop scrolling whenever the user hovers the mouse pointer over it. 
Add a style rule for the div#tmarquee: hover table selector that pauses the animation during 
the hover event. 

20. Save your changes to the file and then reload the cp_astaire.html file in your browser. Verify that 
the marquee listing the Fred Astaire films starts scrolling automatically when the page loads, goes 
back to the beginning after the last film is listed, and stops whenever the user hovers the mouse 
pointer over the marquee. (Note: On touchscreen devices, tap the marquee to initiate the hover 
event and pause the scrolling text, and then tap elsewhere on the page to remove the hover and 
restart the marquee.) 


Case Problem 1 


Data Files needed for this Case Problem: ws_jfk_txt.html, ws_media_txt.css, ws_captions_txt.vtt, 
2 CSS files, 1 MP4 file, 4 PNG files, 1 WebM file 


APPLY 


Rhetoric in the United States Professor Annie Cho teaches rhetoric and history at White Sands 
College. She has asked for your help in designing a companion website for her course. The page you 
will work on contains portions of the inaugural address delivered by President John F. Kennedy in 
1961. She has obtained a video excerpt of the speech that she wants you to augment with captions. 
A preview of the page you will create is shown in Figure 8-64. 


HTML 677 
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Figure 8-64 Rhetoric in the United States page 
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Source: Wikimedia Commons 
Complete the following: 


1. Using your editor, open the ws_jfk_txt.html, ws_media_txt.css, and ws_captions_txt.vtt files 
from the html08 > case1 folder. Enter your name and the date in the comment section of each 
file, and save them as ws_jfk.html, ws_media.css, and ws_captions.vtt files respectively. 


2. Go to the ws_jfk.html file in your editor. Insert a link to the ws_media.css style sheet file. Take 
some time to study the content and structure of the document. 


3. Scroll down to the article element and directly below the h1 heading, insert a video clip 
with the controls enabled, displaying the poster image ws_jfk_poster.png file. Add two possible 
sources to the video clip: ws_jfk_speech.mp4 and ws_jfk_speech.webm, including the 
mime-type for each video source. 

4. After the two video sources, add a captions track with the label Speech Captions using the 
source file ws_captions.vtt. If the browser does not support embedded video, display the 
paragraph: To play this video clip, your browser needs to support HTML 5. 


5. Save your changes to the file and then open the ws_captions.vtt file in your text editor. Add an 
initial line to the text file indicating that this file is in WEBVTT format. 
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6. Add the following track cues to the ws_captions.vtt file, labeling the captions 1 through 12 
(times are in parenthesis): 
(00:01.00 - 00:004.000) We observe today 
(00:04.000 - 00:06.000) not a victory of party, 
(00:06.000 - 00:10.000) but a celebration of freedom - 
(00:10.000 - 00:12.000) symbolizing an end, 
(00:12.000 - 00:15.000) as well as a beginning — 
(00:15.000 - 00:17.000) signifying renewal, 
(00:17.000 - 00:19.000) as well as change. 
(00:19.000 - 00:22.000) For I have sworn before you 
(00:22.000 - 00:24.000) and Almighty God 
(00:24.000 - 00:27.000) the same solemn oath 
(00:27.000 - 00:30.000) our forebears prescribed 
(00:30.000 - 00:33.000) nearly a century and three-quarters ago. 


7. Save your changes to the file and then go to the ws_media.css file in your editor. Within the 
Video Player Styles section, insert a style rule that displays video elements as blocks with a 
width of 90% and horizontally centered by setting the top/bottom margins to 5 pixels and the 
left/right margins to auto. 

8. Create a media query for screen devices with a minimum width of 521 pixels. Within the media 
query, create a style for video elements that sets the width of the player to 360 pixels, floated on 
the right margin with a margin width of 10 pixels. 

9. Within the Track Styles section, create a style rule for caption cues that displays the text in 
a 1.3em sans-serif font with a text color of rgb(221, 128, 160), and a background color of 
rgba(255, 255, 255, 0.8). 

10. Save your changes to the file and then load the ws_jfk.html file in your browser. 

11. Test the page by playing the video clip of Kennedy’s speech. Verify that captions are added to the 
speech, matching the words uttered by the president. (Notes: If you are using Google Chrome 
or Opera, you will have to upload your files to a server if you wish to see the caption styles you 
created for the video clip. If your captions appear white on a gray background, move the mouse 
pointer away from the video player so that the video slider is not showing.) 


Case Problem 2 


Data Files needed for this Case Problem: paa_game_txt.html, paa_animate_txt.css, 2 CSS files, 
6 PNG files, 1 TTF file, 1 WOFF file 


Pixal Arts and Entertainment Heather Neidell manages the website for Pixal Arts and 
Entertainment, a company specializing in games and entertainment apps. She has asked you to work 
on the initial page for the company’s new game, Frustrated Fox. To make the page come alive, she 
wants you to enhance the page with animation using sprites from several characters in the game. A 
preview of the page you will create is shown in Figure 8-65. 


CHALLENGE 
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Figure 8-65 Frustrated Fox page 


DOWNLOAD SCREENSHOTS HIGH SCORES HINTS 


Source: Sprites constructed from public domain images found at: https://www.glitchthegame.com/ 
public-domain-game-art/; Background from public domain image at: http://all-free-download.com/ 
free-vector/download/cartoon_landscapes_trees_278582.html 


Complete the following: 


il 


Using your editor, open the paa_game_txt.html and paa_animate_txt.css files from the 
html08 > case2 folder. Enter your name and the date in the comment section of each file, and 
save them as paa_game.html and paa_animate.css respectively. 


. Go to the paa_game.htmll file in your editor. Add a link to the paa_animate.css style sheet file to 


the document head. 


. Scroll down to the gameBox div element. Within this element, insert three div elements with 


the ids butterfly, bat, and fox and belonging to the sprite class. These div elements will contain 
animated backgrounds showing three characters from the game. 


. Save your changes to the file and then return to the paa_animate.css file in your editor. 
. Within the Transition Effects section, insert a style rule for the nav#gameLinks a selector that: 


(a) places the links using relative positioning, (b) sets the font color to white, and (c) transitions 
the font color over a 0.5-second interval. 


. Insert a style rule for the nav#gameLinks a:hover selector that sets the font color to 


rgb(255, 194, 99). 
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Explore 7. Heather wants a transition effect applied to the links in the gameLinks list in which 
a gradient-colored bar gradually expands under each link during the hover event. To create this 
effect, you will use the after pseudo-element and the content property to insert the bar. Create 
a style rule for the nav#gameLinks a::after selector that: (a) places an empty text string as the 
value of the content property, (b) places the content with absolute positioning with a top value 
of 100% and a left value of 0 pixels, (c) sets the width to 0% and the height to 8 pixels, 

(d) changes the background to a linear gradient that moves to right from the color value 
rgb(237, 243, 71) to rgb(188, 74, 0), (e) sets the border radius to 4 pixels, and (f) hides the bar by 
setting the opacity to 0. 


. When the links are hovered over, change the appearance of the bar by adding a style rule for the 


nav#gameLinks a:hover: :after selector that changes the opacity to 1 and the width to 100%. 


. Return to the style rule for the nav#gameLinks a::after selector and add a transition style that 


applies the opacity and width changes over a half-second interval. 

To create animated cartoons, Heather has stored frames of the images in the paa_bat.png, 
paa_bfly.png, and paa_fox.png image files. View these files to see the different frames to be 
displayed in the animation. 

Return to the paa_animate.css file and, within the Sprite Styles section, create a style rule that 
displays all div elements of the sprite class with absolute positioning. 

For the div element with the ID bat, create a style rule that: (a) sets the width and height to 

40 pixels by 50 pixels, (b) sets the top and left coordinates to 100 pixels and —50 pixels, and 

(c) displays the paa_bat.png as the background image placed at the left center of the background 
with no tiling and sized to cover the background. 

Create a similar style rule for the div element with the ID butterfly, setting the width and height 
at 35 pixels, the top-left coordinates at 60 pixels and —50 pixels, and using the paa_bfly.png as 
the background image. Create another style rule for the div element with the ID fox, setting the 
width and height at 280 and 260 pixels, the bottom and right coordinates at 10 pixels, and the 
paa_fox.png file as the background image. (Note: The background image in all aminations 
should place the image at the left center with no tiling and sized to cover the background.) 
Sprites are animated by moving the background image file across the background of the object. 
Go to the Animation Styles section and create an animation named playSprite that sets the 
background image position to right center at 100% time. 

Heather wants the bat and butterfly to flutter as they move across the animation box. Create an 
animation named flyRight with the following key frames: (a) at 25% time, set the top coordinate 
to 150 pixels; (b) at 50% time, set the top coordinate to 55 pixels; (c) at 65% time, set the top 
coordinate to 120 pixels; (d) at 90% time, set the top coordinate to 50 pixels; and (e) at 100% 
time, set the top and left coordinates to 80 pixels and 100%. 

Explore 16. Sprites achieve the animation effect by changing the background image in n — 1 
discrete steps, where rn is the number of frames in the sprite. Apply the playSprite animation to 
the fox div element after a 4-second delay over a time interval of 3.5 seconds and a steps value 
of 27. Set the animation to loop infinitely. 

Apply the playSprite animation to the bat div element over a 2-second interval with 39 steps. 
Apply the £1yRight animation over an 8-second interval with linear timing. Set both animations 
to loop infinitely. 

Apply the playSprite animation to the butterfly div element after a 3-second delay, with a 
playing time of 1 second spaced out in 33 steps. Apply the £lyRight animation over a 6-second 
interval. Make the butterfly appear to hover by applying a Cubic Bézier curve to the £lyRight 
timing with the function cubic-bezier (0,1,0.73,0). Set both animations to loop infinitely. 
Save your changes to the file and then open the paa_game.htmll file in your browser. 

Hover your mouse pointer over the four links below the Frustrated Fox logo and verify that a 
gradient-filled bar grows beneath the links in response to the hover event. 

Verify that the animation box shows an animated bat and then a butterfly moving across the sky 
and that, after a short delay, an animated fox jumps up toward the bat and butterfly trying to 
catch them. 
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OBJECTIVES 


Session 9.1 

e Insert a script element 

e Write JavaScript comments 

¢ Display an alert dialog box 

e Use browser debugging tools 


Session 9.2 

¢ Reference browser and page 
objects 

e Use JavaScript properties and 
methods 

¢ Write HTML code and text 
content into a page 

¢ Work with a Date object 


Session 9.3 

e Use JavaScript operators 

¢ Create a JavaScript function 
e Create timed commands 
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Creating a Countdown Clock 


Case | Tulsa’s New Year’s Bash 


Every year on December 31st, Tulsa, Oklahoma, rings in the 

New Year with a daylong celebration that includes races, circus 
performers, tasting booths, live bands, and dances. The celebration 
is capped by fireworks at midnight. The bash has become so big 
that partygoers come from miles away to join in the fun, and 
planning for the celebration starts early. 


Hector Sadler manages promotion for the New Year’s Bash. One of 
his responsibilities is to maintain a website that advertises the event 
and builds anticipation for it. Hector wants to include a countdown 
clock on the site’s home page that displays the current time and the 
number of days, hours, minutes, and seconds remaining before the 
fireworks go off. You will write the JavaScript code to create this 
clock for Hector. 


tny_clock_txt.html 
tny_script_txt.js 
+ 5 files 


code9-2_txt.html 
countdown9-2_txt.js 
+ 3 files 


bc_union_txt.html 
bc_today_txt.js 
+ 6 files 


tny_july_txt.html 
tny_timer_txt.Js 
+ 5 files 


code9-3_txt.html 
clockface9-3_txt.js 
+ 5 files 


ja_vynes_txt.html 
ja_quote_txt.js 
+ 8 files 


code9-1_txt.html 
clock9-1_txt.js 
+ 3 files 


code9-4_txt.html 
debug9-4_txt.js 
+ 15 files 
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Session 9.1 Visual Overview: 


[} Tulsa's New Year's Bash x + 
CO File | Di/tny-clock.html 


Responsive V 680 x 570 100% ¥ Online ¥ 


An alert dialog box 


created by JavaScript. This page says 


el eto Tulsa 


'Se g 1Y 


TAYS HOURS MINUTES SFCOMaS : 

News \ Night Beat Tulsa Times Calendar City Links: 
Tulsa's New Year's Eve Bash is back The fun continues with A Taste of 
for the 26th year of fun and Tulsa from Tulsa's best eateries, and 
excitement. Be sure to arrive early the artistically inclined should plan 
for all of the festivities and the final on attending the Winter Art Fair on 
countdown. The party starts on Tulsa’s downtown square. 
December 31 at noon with the 
FrostiRun 5K and 10K races. Sign up Music from Lester's Blues Band and 
now or the morning of the race. The Jazz Express brings us into the 

New Year. The dancing starts at 7 

Family fun is available at the Kid's p.m. and continues until midnight. 
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Creating a JavaScript File 


The use strict statement 
forces JavaScript to strictly 
apply syntax rules. 


= o x 
b*¢ : 
fe Ol Elements Console Sources Network Performance Memory » ae 
Page FFilesystem Overrides » : [ tny-sctiptjs 
7O top 1,;"use strict"; - 
2 
¥O file// 3 y* 
v i Dy a New Perspectives on HTML5S and CSS3, 8th Edition 
5 Tutorial 9 
1 
b Sy eeeen 6 Tutorial Case 
wb tny_scriptjs 7 
5 thy_tesetcss $ Countdown Clock 
ot E Author: Hector Sadier ee ; 
Bi tny.styles.css 18: Date: 2021-83-01 Multi-line JavaScript 
fy cegmentt4.wor 11 comment enclosed within /* 
B& tnybannerong f and */ characters. 


4 window.alert("Welcome to Tulsa"); 


Text displayed 


in the alert : 
: The window.alert 
dialog box. 4 f 
command displays a dialog 
P ‘ box within the browser 
window. 
‘ »| T} Line 14 Column 34 ea 
una t t- ta@Q Scope Watch 
¥ Call Stack | - G 
¥ Breekpoints narrays not 
| No breakpoint 
» XHR/fetch Breakpoints 
» DOM Breakpoints 
» Ginhal lictenerc x 
: Console x 
[] © | top ¥| ® ) Filter Default levels ¥ a 
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The browser Developer 
Pane can be used to locate 
and fix programming 
errors. 
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Introducing JavaScript 


In the last two tutorials, you read about JavaScript as a programming tool for creating 
interactive web forms and animated graphics. Starting with this tutorial, you examine 
the features and syntax of the JavaScript language, as well as explore how to create and 
apply your JavaScript programs to your websites. 


Server-Side and Client-Side Programming 


Web-based programming comes in two main types: server-side programming and 
client-side programming. In server-side programming, the program code is run from 
the server hosting the website. In some applications, users can interact with the 
program, requesting specific information from the server, but the interaction is done 
remotely from the user to the server. See Figure 9-1. 


Figure 9-1 Server-side programming 


3) a server-side program processes 
the information and may send 
additional feedback to the user 


i ae 
I ini 
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1) user retrieves web 
page from the server 


IN 


Ii 


2) information is sent to a 
program running on the server 


There are advantages and disadvantages to this approach. A program running on 
a server can be connected to an online database containing information not directly 
accessible to end users, enabling websites to support such features as online banking, 
credit card transactions, and discussion forums. However, server-side programs use 
server resources and require Internet access. If the system is over-loaded, the end user 
will have to sit through long delays, waiting for a process request to be fulfilled; or if 
the system is offline, the end user will have to wait for the system to come back online 
before the request can be processed. 

In client-side programming, programs are run on the user’s computer using scripts 
that are downloaded along with the HTML and CSS files. See Figure 9-2. 
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Figure 9-2 Client-side programming 
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Client-side programming distributes the load so that one server is not overloaded 
with program-related requests; it tends to be more responsive because users do not 
have to wait for a response from a remote server. However, client-side programs 
can never completely replace server-side programming. For example, tasks such as 
running a search or processing a purchase order must be run from a central server 
because only the server can access the database needed to complete these types of 
operations. 

In many cases, a combination of server-side and client-side programming is used. 
For example, data entry forms typically use client-side programs to validate some data 
entries, such as contact information, and server-side programs to submit the validated 
form for further processing that can only be done from a central server. In this tutorial, 
you will work only with client-side programming. However, it is important to be aware 
that in many cases, a complete web programming environment includes both client- 
side and server-side elements. 


The Development of JavaScript 


The programming language for client-side programs is JavaScript. JavaScript is an 
interpreted language, meaning that the program code is executed directly without 
requiring an application known as a compiler to translate the code into machine 
language. You need only two things to use JavaScript: a text editor to write the 
JavaScript code and a browser to run the commands. This means that JavaScript code 
can be inserted directly into an HTML file, or it can be placed in a separate text file that 
is linked to the HTML file. 

Through the years, JavaScript has undergone several revisions, which include new 
components and features that might not be supported by older browsers. Because of 
this, you need to test your JavaScript code on a variety of browsers and platforms in 
the same way you test your HTML and CSS code to ensure the widest compatibility. 
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Working with the script Element 
JavaScript code is attached to an HTML file using the following script element: 
<script src="url"></script> 


where url is the URL of the external file containing the JavaScript code. Thus, the 
following code loads the contents of the tny_script.js file: 


<script src="tny_script.js"></script> 


If you don’t want to use an external file, you can create an embedded script by 
omitting the src attribute and placing all of the JavaScript code within the script 
element as follows 


<script> 
code 
</script> 


where code is the code of the JavaScript program. 


Inserting the script Element 


¢ To link a web page to an external script file, add the following script element to 
the HTML file 
Biciaaeie ice UpbalUSre/ssohenjoues 
where url is the URL of the external file containing the JavaScript code. 
¢ To embed a script within the HTML file, add the following script element 
KS(eteal joes 
code 
</script> 


where code is the code of the JavaScript program. 

To load an external script file asynchronous with the HTML file, add the attribute 
async to the script element. 

To load an external script file after the HTML file has finished loading, add the 
attribute defer to the script element. 


Loading the script Element 


The script element can be placed anywhere within the HTML document. 
When the browser encounters a script, it immediately stops loading the page 
and begins loading and then processing the script commands. Only when the 
script is completely processed does the browser continue to load the rest of the 
HTML file. 

With larger and more complicated scripts, this loading sequence can degrade the 
user’s experience because the page is literally stalled as it waits for the script to be 
processed. You can modify this sequence by adding the async or defer attributes 
to the script element. The async attribute tells the browser to parse the HTML and 
JavaScript code together, only pausing to process the script before returning to the 
HTML file. The defer attribute defers script processing until after the page has been 
completely parsed and loaded. See Figure 9-3. 
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Figure 9-3 Loading HTML and JavaScript code 


<script> The browser pauses loading the HTML file when it encounters the script elements, 
continuing only when the entire script is loaded and processed. 


HTML 


JavaScript 


<script async> The browser loads the HTML file and external script file together, 
pausing only to process the script. 


HTML 


JavaScript 


<script defer> The browser loads and processes the script only after the HTML file 
has been completely loaded by the browser. 


HTML 


The async and defer attributes are ignored for embedded scripts and the code nested 
within the script element is executed as soon as it is encountered within the HTML file. 


You can place the script 
element at the end of the 
file so that it is processed 


only after all oftheuTm. Inserting the script Element 


code has been parsed by 


Hector wants you to create a script that will display a running countdown clock for use 
the browser. 


with his page on Tulsa’s New Year’s Bash website. You will start working on his page 
by inserting a script element in the document head that will load the contents of 
the tny_script.js file. You will use the defer attribute to ensure that the script will not 
execute until all the page content is loaded by the browser. 


To insert the script element: 


D 1. Use your editor to open the tny_clock_txt.html file from the html09 » tutorial 
folder. Enter your name and the date in the comment section of the file and 
save it as tny_clock.html. 


BD 2. Review the rest of the document to become familiar with its contents and 
structure. 


BD 3. Directly before the closing </head> tag insert, enter: 


<script src="tny script.js" defer></script> 


Figure 9-4 highlights code to insert the script element. 
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Figure 9-4 Inserting the script element 


<title>Tulsa's New Year's Bash</title 


<link href="tny_reset.css" rel="stylesheet" /> 
<link href="tny_styles.css" rel="stylesheet" /> 
<script src="tny_script.js" defer></script> 


</head> 


source of the defers loading the script file 
JavaScript file until after the rest of the page 


is loaded by the browser 


BD 4. Open tny_clock.html in your browser. The initial page is shown in Figure 9-5. 


Figure 9-5 Initial countdown clock 
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days, hours, minutes, and 
seconds until January 1st 


At the top of the page, Hector has inserted placeholder text showing the current 
date and time and the number of days, hours, minutes, and seconds until January 1st 
of 2022. However, this text is static and will not change to reflect the current date and 
time. Hector wants you to create a script that will update the date and time values 
every second and continually calculate the amount of time left until midnight on New 
Year’s Eve. You will put the commands to create this countdown clock in a JavaScript 
file named tny_script.js. 
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Using Other Scripting Languages 


The script element can be used with programming languages other than JavaScript. 
Other client-side scripting languages are identified by including the MIME type of the 
language. For example, the scripting language VBScript from Microsoft has the MIME 
type text /vbscript and can be accessed using the following code: 


SEGQANOHE SieecSlmieil” jeyjosal cee / voceieloe" s</ seins 


You do not have to include a type attribute for JavaScript files because browsers 
assume JavaScript’s MIME type, text /javascript, by default. 


Creating a JavaScript Program 


Because JavaScript files are simple text files, you can create and edit them using a 
standard text editor. You will start your study of JavaScript by first learning how to insert 
comments that describe the contents and goals of the script. 


Adding Comments to your JavaScript Code 


Adding comments to your code is an important programming practice. It helps other 
people who examine your code understand what your programs are designed to do and 
how they work. It can even help you in the future when you return to edit the programs 
and need to recall the programming choices you made. JavaScript comments can be 
entered on single or multiple lines. The syntax of a single-line comment is 


// comment text 


where comment text is the JavaScript comment. Single-line comments can be placed 
on the same line containing a JavaScript command in the general format: 


command; // comment text 


Multiple-line comments include several comments with each comment on its own line 
and are inserted using the following format: 
/* 
comment text spanning 


several lines 


wv 


REFERENCE 


Adding a JavaScript Comment 
¢ To add a comment on a single line or inline with other JavaScript commands, enter 
// comment text 


where comment text is the JavaScript comment. 
¢ To create a comment the spans multiple lines, enter: 
/* 
comment text spanning 


several lines 


af 


Hector has already started a JavaScript file with a multiple-line comment describing 
the file and its authorship. Open this file now and complete the initial comment lines. 
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To edit JavaScript comments: 
D 1. Use your editor to open the tny_script_txt.js file from the html09 » tutorial folder. 


D 2. Enter your name and the date in the comment section of the file as shown 
in Figure 9-6. 


Figure 9-6 Adding a JavaScript comment 


marks the beginning "he 
of the comment New Perspectives on HTML5 and CSS3, 8th Edition 


marks the end of the 
comment 


D 3. Save the file as tny_scriptjs. 


Next, you insert your first JavaScript command. 


Writing a JavaScript Command 


Every JavaScript program consists of a series of commands or statements. Each 
command is a single line that indicates an action for the browser to take. A command 
should end in a semicolon, employing the following syntax: 


JavaScript command; 


To test your understanding of JavaScript, you will add the following command to the 
tny_script.js file in the steps that follow: 


window.alert ("Welcome to Tulsa"); 


This command displays a dialog box to the user containing the message “Welcome to 
Tulsa”. Note that the text of the message is enclosed in double quotes. 


To add a command to the script: 


Figure 9-7 highlights the JavaScript command. 


window.alert("Welcome to Tulsa"); 
es 


runs an alert dialog box text displayed in 
in the browser window the dialog box 
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BD 2. Save your changes to the file and then reload the tny_clock.html file in your 
browser. As shown in Figure 9-8, the browser displays a dialog box with the 
message you specified. 


This page says 


Welcome to Tulsa 


Note that the dialog box style is determined by the browser. The dialog box 
in Figure 9-8 is the one displayed by Google Chrome. 


BD 3. Click the OK button to close the dialog box. 


The JavaScript command you just wrote is a very simple one. Before writing more 
complicated commands, you should first review some of the basics of JavaScript syntax 
and how to locate mistakes that might appear in your programs. 


Understanding JavaScript Syntax 


In addition to always including semicolons at the end of each command, there are 
some other syntax rules you should keep in mind when writing a JavaScript command. 
JavaScript is case sensitive, so you must pay attention to whether or not the letters of 

a JavaScript command are capitalized. For example, the command below improperly 
capitalizes the dialog box command as Window.Alert and, as result, an error will 
occur when the script is run. 


Example of improper capitalization: 
Window.Alert ("Welcome to Tulsa"); 

Example of proper capitalization: 
window.alert ("Welcome to Tulsa"); 


Like HTML, JavaScript ignores occurrences of extra white space between commands, 
so you can indent your code to make it easier to read. However, unlike HTML, you 
must be careful about line breaks within commands. A line break placed within the 
name of a JavaScript command or within a quoted text string will cause an error when 
the script is run. Thus, the following code will cause the program to fail. 


Example of improper line break: 


window.alert ("Welcome 
to Tulsa"); 


If you want to break a text string into several lines, you can indicate that the text 
string continues on the next line by using the following backslash \ character. 


Example of proper line break: 


window.alert ("Welcome \ 
to Tulsa"); 


To see how your browser will handle errors in your JavaScript code, modify the 
window.alert command you just wrote, adding an intentional error using improper 
capitalization. 


Sy ~=HTML 5 and CSS | Tutorial 9 Getting Started with JavaScript 


To insert an intentional error: 


BD 1. Return to the tny_script.js file in your editor and change the command to 
display an alert dialog box to the following incorrect syntax: 


Window.Alert ("Welcome to Tulsa") ; 


BD 2. Save your changes to the file and then reload the tny_clock.html file in your 
browser. Verify that the dialog box is not displayed by the browser. 


At this point, you know the dialog box did not display because of the intentional 
error you entered in the code. But, what if the dialog box did not display as intended 
and you don’t know the reason? Then, you can use your browser’s debugging tools to 
track the error to its source. 


Debugging Your Code 


As you work with JavaScript, you will inevitably encounter scripts that fail to work 
because of an error in the code. To fix those problems, you need to debug your 
program. Debugging is the process of locating and fixing a programming error. To 
debug a program, you must first determine the type of error present in your code. 

There are three types of errors: load-time errors, run-time errors, and logical errors. 
A load-time error occurs when a script is first loaded by a browser. As the page loads, 
the browser reads through the code looking for mistakes in syntax. If a syntax error is 
uncovered, the browser halts loading the script before trying to execute it. 

A run-time error occurs after a script has been successfully loaded with no syntax 
errors and is being executed by a browser. In a run-time error, the mistake occurs when 
the browser cannot complete a line of code. For example, if a command includes a 
mathematical expression involving division by zero (something that is not allowed), the 
program will fail with a run-time error even though proper syntax is used. 

A logical error is free from syntax and executable mistakes, but results in an 
incorrect result, such as the wrong name being returned from a database or an 
incorrect value being returned from a calculation. A logical error is often the hardest to 
fix and will require meticulous tracing of every step of the code to detect the mistake. 


Opening a Debugger 


Every major browser includes debugging tools to locate and fix errors in your JavaScript 
code. For most browsers, you can open the debugging tool by pressing the F12 key 

on your keyboard or by selecting Developer Tools from the browser menu. To see a 
browser debugger, you will open the developer tools for Google Chrome. If you don’t 
have access to Google Chrome, use the developer tools for your browser, reading the 
browser's online documentation to learn how to the use your browser's tools. 


To open the Google Chrome developer tools: 


D 1. With the browser window still open, press the F12 key to view the Google 
Chrome developer tools. 


. Reload the tny_clock.html file. 


2 
3. From the menu list at the top of the Developer Tools pane, click Sources to 
show the list of files used in the current page. 


D 4. Click tny_script.js from the Sources file list to show the program code in that 
file. See Figure 9-9. 
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Figure 9-9 Google Chrome developer tools 
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Trouble? Depending on your browser setup, the location and size of your 
Google Chrome Developer pane might not match the one shown in Figure 9-9. 
If you do not see the Console shown in Figure 9-9 at the bottom of the pane, 
click Console to show the errors. 


The syntax error you introduced in the script file is highlighted and the Console pane at 
the bottom of the window provides the error message, “Uncaught TypeError: Window.Alert 
is not a function”—a message indicating that the browser cannot process this command 
due to its improper syntax. At this point, you correct the syntax error by rewriting the code. 


To fix the syntax error: 


BD 1. Return to the tny_script.js file in your editor and change the command to 
display the alert dialog box back to: 


window.alert ("Welcome to Tulsa") ; 


BD 2. Save your changes and then reload the tny_clock.html file in your browser 
with the developer tools still visible. Verify that no syntax errors are reported 
and that the alert dialog box is once again displayed to the user. 


BD 3. Click the OK button to close the dialog box. 
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Inserting a Breakpoint 


Debuggers contain a wealth of tools to aid you as you create more complex and involved 
programs. A script might work flawlessly except for one line that causes all subsequent 
commands to fail. One useful technique for locating the source of an error is to set up 
breakpoints, which are locations where the browser will pause the program, allowing 
the programmer to determine whether the error has already occurred at that point in the 
script’s execution. To set a breakpoint in the Google Chrome browser, click the line 
number next to the line where you want the browser to pause execution of the script. Try 
this now by setting up a breakpoint in the line where the alert dialog box is displayed. 


To place a breakpoint: 


D1. In the pane showing the source code of the tny_script.js file, click the line 
number corresponding to the line containing the window. alert command. 


Notice that a blue arrow highlights the line, indicating that a breakpoint has 
been established at this location in the script. 


Reload the tny_clock.html file in your browser. Verify that the browser halts 
execution of the script prior to displaying the alert dialog box and that a 
message is displayed with a control that allows the user to resume execution 
of the script. See Figure 9-10. 


Figure 9-10 Setting a breakpoint in Google Chrome 
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BD 3. Click the Play/Pause button [IB] to resume execution of the script and then 
click the OK button to close the alert dialog box. 


D4. Click the line number next to the line containing the window. alert 
command to remove the breakpoint. 


In this tutorial, you won't be adding any more intentional errors, but you might make 
your own mistakes in typing the JavaScript commands for the countdown clock program. 
If you do, you can use the debugging tools in your browser to locate and fix the mistake. 
For now, you close the Developer Tools pane and remove the command you created to 
display an alert dialog box. You won't need it in the final version of the program. 


To close the browser's developer tools: 
BD 1. Within the browser window, press the F12 key to close the developer tools. 
D 2. Return to the tny_script.js file in your editor. 


D 3. Select the line window.alert ("Welcome to Tulsa") ; and delete it, 
removing it from the script. 


Applying Strict Usage of JavaScript 


JavaScript was designed to be easy for novice programmers to use. For that reason, 
JavaScript differs from some other programming languages, such as Java, which 
demand strict application of rules for syntax and program structure. Some JavaScript 
lapses in syntax are resolved in a way that it is not fatal to the program's execution. 
While this is attractive to novice programmers, it does encourage a certain degree of 
laxness in coding. 

Many developers advocate that JavaScript be run in strict mode in which all 
lapses in syntax result in load-time or run-time errors. Using strict mode encourages 
good programming technique and also makes the script run more efficiently and 
faster. To run a script in strict mode, add the following statement to the first line 
of the file: 


"use strict"; 


For this and future projects, you apply strict mode to the JavaScript code you create. 
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To apply strict usage to JavaScript: 


D 1. Go to the top of the tny_script.js file in your editor and directly before the 
initial comment line /*, insert the line 


"use strict"; 


and press Enter. Figure 9-11 shows the revised code in the file. 


Figure 9-11 Applying strict usage to JavaScript 
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BD 2. Save your changes to the file. 


Be aware that operating JavaScript in strict mode applies not just to your code but 
to any third-party scripts that your program accesses. This can cause fatal errors if the 
authors of those scripts did not write all of their commands following strict guidelines. 
You can avoid this problem by applying the "use strict" statement locally only to 
functions that you create rather than globally as the first line of your script file. The 
issues of JavaScript functions and local and global scope are discussed in the next two 
sessions. 


V4) 


Written Communication: Writing Better JavaScript Code 


In working environments, the maintenance of a program or script is often shared 
among several individuals. The program you write today might be the responsibility of 
one of your colleagues next month. Thus, an important goal in writing program code 
is to make it intelligible to other users so that they can easily maintain and update it. 
Here are some tips to help you write better JavaScript code: 


PROSKILLS 


e Use consistent names: One common source of error is misnamed variables and 
functions. You can avoid this problem by being consistent in the use of uppercase 
and lowercase letters in your variable and function names. 

e Make the code easier to read with whitespace: Crowded commands and 
statements are difficult to read and edit. Use whitespace and indented text 
generously to make your code more legible to others. 

¢ Keep your lines compact: Long text strings can wrap to new lines in your text 
editor, making the text difficult to read. Strive to keep your lines to 80 characters or 
less. When a statement doesn't fit on a single line, break it to a new line at a point 
that maximizes readability. 

¢ Comment your work: Always add comments to your work, documenting the 
purpose of each command and expression. 


As your scripts become longer and more complicated you can also simplify your 
code by breaking it up into several JavaScript files dedicated to a specific task. Such 
files can be shared among several web pages, freeing you from having to rewrite the 
same code several times. 
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REVIEW 


ession 9.1 Quick Check 


1. JavaScript code is used to create a: 


a. server-side application 
b. client-side application 
c. Microsoft Windows application 
d. cell phone application 


. To attach a JavaScript program to an HTML file, use the: 


a. object element 

b. javascript element 
c. embed element 

d. script element 


. With deferred loading, the program is not loaded until: 


a. the page has been parsed and loaded 
b. the page has been read by the user 
c. the user clicks the OK button 

d. the code has been parsed and loaded 


. To insert the comment “Countdown clock” into a JavaScript program, enter: 


a. / Countdown clock 

b. <-- Countdown clock --> 
c. /* Countdown clock */ 
d. ‘Countdown clock 


. To display the message “Happy New Year!”, enter the JavaScript command: 


a. MSgBox "Happy New Year!" 

b. window.message "Happy New Year!" 
c. window.call("Happy New Year!") 
d. window.alert ("Happy New Year!") 


. What will be the result of running the following JavaScript command? 


WINDOW.ALERT ("Page Loaded") ; 

a. An alert box with the text "Page Loaded" 

b. Nothing until the user clicks the OK box 

c. Nothing because the code uses improper syntax 

d. A debug warning in the console with the message “Page Loaded” 


. A location in the script where the browser will pause the program is created 


with an: 

a. End statement 

b. Pause statement 

c. Breakpoint 

d. Ctrl+C keyboard combination 


. What statement should be added to a JavaScript file to ensure that the code is 


strictly interpreted? 

a. debug = true; 
b. "use strict"; 
c. use = strict; 


d. use-strict; 
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Session 9.2 Visual Overview: 


The toLocaleDateString() 
method returns a text string 

containing the date using local 
conventions. 


The Date object 
stores a date value 
and a time value. 


/* Store the a 


and time 
var currentDay = new Date("May 23, 2021 14:35:05")}; 
var dateStr = currentDay.toLocaleDateString() 


var timeStr = currentDay.toLocaleTimeString() ; 


currenty date 


Giz var keyword 
declares a JavaScript 
variable. Here the 
currentDay, dateStr, and 
timeStr variables are 

declared by the script. 


(Gre toLocaleTime- : 
String() method document. getE LementById("dateNow") .innerHTML 
returns a text string dateStr + "<br 
containing the time 

(_using local conventions. 


/* Display the time Left until New Year's 


" "W 
Gee eee document. getE llementById("days").textContent 


method selects the 

element with the ID 
“dateNow”. 

q 


document. getE LementById("mins").textContent 
document. getE LementById("secs").textContent 


The textContent 
property defines the 
text within the 

referenced element. 


The innerHTML 
property defines the 

HTML code within the 
referenced element. 
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JavaScript Variables and Dates 


Date and time values generated 
with the toLocaleDateString() 
and toLocaleTimeString() 
methods. 


- &- ss & 


Calendar City Links 


© altafulla/Shutterstock.com; 


© jbdphotography/Shutterstock.com; Source: www.1001fonts.com Countdown clock 


text generated using 
the textContent 


property. 
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Introducing Objects 


In the last session, you limited your use of JavaScript to creating an alert dialog box, but 
you left the content of the web page unchanged. In this session, you will use JavaScript 
to write content into the web page itself. To do that, you have to work with objects. An 
object is an entity within the browser or web page that has properties that define it and 
methods that can be acted upon it. For example, a video embedded on a web page is 
an object and has properties such as source of the video file or the width and height of 
the video player. It also has methods such as playing or pausing the video. 

JavaScript is an object-based language that manipulates an object by changing one 
or more of its properties or by applying a method that affects the object’s behavior 
within the web page or web browser. There are four kinds of JavaScript objects: built-in 
objects that are intrinsic to the JavaScript language, browser objects that are part of the 
browser, document objects that are part of the web document, and customized objects 
that are created by the programmer for use in his or her application. 

Browser objects and document objects are organized in hierarchical structures 
respectively called the browser object model (BOM) and the document object model 
(DOM). Figure 9-12 shows a portion of this hierarchical structure with the window 
object, representing the browser window, as the topmost object in the hierarchy. 


— Figure9-12 J Object hierarchy 
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The following are contained within the window object: 


e the document object containing objects found within the web page document 
e the history object containing the browser's history list 

e the screen object containing information about the computer screen 

¢ the navigator object containing information about the browser application 

¢ the location object containing information about the current URL 


These objects themselves might contain other objects. For example, the forms 
object contained in the document object contains objects for each element within a 
web form. 

It is important to note that document objects can be referenced only after the 
browser has finished parsing the page content. Any command that references a 
document object before the browser has parsed the HTML code will result in 
an error because those objects do not yet reside in memory. To ensure that an 
object can be referenced within a JavaScript program, apply the defer attribute 
to the script element so that JavaScript code is run only after the page is 
completed loaded. 


Object References 


Each object within the hierarchy is referenced by its object name such as window, 
document, or navigator. Because every object aside from the window object is 
nested within other objects, you can reference an object within the hierarchy using the 
notation 


objectl.object2.object3 


where object1 is at the top of the hierarchy, object2 is a child of object1, and so on. 
Thus, to reference the images object nested within the window and document object, 
you would use the JavaScript expression: 


window.document .images 


You do not always have to use a complete reference detailing the entire object 
hierarchy. By default, JavaScript will assume that object references point to the current 
browser window. Thus, you can also refer to the images object in the current browser 
window using the expression: 


document .images 


Referencing Object Collections 


Objects are organized into groups called object collections. Thus, the following object 
reference 


document .images 


references all of the inline images in the document marked with the <img /> tag. 
Figure 9-13 describes some other object collections found within the document 
object model. 
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Figure 9-13 Document object collections 


Object Collection References 

document.anchors All elements marked with the <a> tag 
document.applets All applet elements 
document.embeds All embed elements 

document.forms All web forms 

document.frames All frame elements 
document.images All inline images 


document.links All hypertext links 


document.plugins All plug-ins supported by the browser 
document.scripts All script elements 
document.styleSheets All stylesheet elements 


To reference a specific member of an object collection, you can use either 
collection[idref] 

or 
collection. idref 


where collection is a reference to the object collection, and idref is either an index 
number representing the position of the object in the collection or the value of the id 
attribute assigned to the element. The first object in the collection has an index number 
of 0 with subsequent objects given index numbers of 1, 2, 3, and so on. Thus, if the 
first inline image within a document has the tag 


<img src="tny_logo.jpg" id="logoImg" /> 
you can reference that image using any of the following expressions: 


document .images [0] 
document .images ["logoImg"] 
document .images.logoImg 


Object collections can also be based on tag names using the expression 
document .getElementsByTagName (tag) 

where tag is the name of an HTML element. For instance, the expression 
document .getElementsByTagName ("h1") 


returns an object collection of all h1 elements within the current document, while the 
expression 


document .getElementsByTagName ("h1") [0] 


references only the first h1 element found in the document. 
Object collections can also be formed from HTML elements belonging to the same 
class by using the expression 


document .getElementsByClassName (class) 


where class is the value of the class attribute from the HTML document. Thus, the 
expression 


document .getElementsByClassName ("newGroup" ) 


returns the collection of all elements that contain the attribute class="newGroup". 
Because there is no distinction between HTML elements in this expression, the object 


Case is important with the 
getElementByld() method. 
The id value must match 
both the uppercase and 
lowercase letters in the id 
attribute value. 
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collection might contain elements with different tag names as long as they all share a 
common value for the class attribute. 

Finally, you also can create references to objects by the value of their name attribute 
using the expression 


document .getElementsByName (name) 


where name is the value of the name attribute associated with the element. Note that 
because more than one element can share the same name—such as radio buttons 
within a web form—this method returns an object collection rather than a single object. 


Referencing an Object by ID and Name 


One of the problems with object collections is that JavaScript will have to search 
through the entire collection to locate a specific item. If the object collection is large, 
this can be a time-consuming task and slow down the program. Another, more efficient 
approach, is to reference an element by its id attribute, using the expression 


document .getElementById (id) 
where id is the value of the id attribute. Thus, the expression 
document .getElementById ("dateNow" ) 


references the element with the ID dateNow in the document. Note that only one 
object is returned, not a collection, because each id value is unique within an HTML 
document. 


REFERENCE 


Referencing Objects 
¢ To reference an object as part of the collection in a document, use either 


collection[idref] 
or 
collection.idref 


where idref is either an index number representing the position of the object in the 
collection or the value of the id attribute assigned to that element. 
° To reference a collection of elements based on the tag name, use 


document .getElement sByTagName (tag) 


where tag is the name of the element tag. 
e To reference a collection of elements based on the value of the class attribute, use 


document .getElementsByClassName (class) 


where class is the class attribute value. 
e To reference a collection of elements based on the value of the name attribute, use 


document .getElement sByName (name) 


where name is the value of the name attribute. 
¢ To reference a document object based on the value of its id attribute, use 


document .getElementById (id) 


where id is the id attribute value. 


Now that you have explored multiple ways to reference objects within a web page 
document, you will look at how to modify those objects. 
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Changing Properties and Applying Methods 


An object can be modified in two ways: either by changing the object’s properties or by 
applying a method. First, you examine how to modify an object property. 


Object Properties 
An object property is accessed using the following expression 
object.property 


where object is a reference to an object and property is a property associated 
with that object. For example, in Tutorial 8 you learned that input box controls 
have the value property, which sets the values displayed in the input box. To return 
the value of the input box control with the ID firstName, you would apply the 
expression: 


document .getElementById("firstName") .value 


Thus, if the input box control displays the value “Hector”, this expression will return 
the text string “Hector”. 
To change the value of an object property, run the command 


object.property = value; 


where value is the new value of the property for the referenced object. For example, to 
change the value in the firstName input box to “Diane”, you would run the command: 


document .getElementById("firstName").value = "Diane"; 


Not every property can be changed. Some properties are read-only properties and 
cannot be modified. For example, the navigator object representing the browser 
supports the appVersion property, which returns the version number of the browser 
program. So, while you can use the expression navigator.appVersion to view the 
version number of your browser, you certainly cannot use JavaScript to change your 
browser version. 


Applying a Method 


The other way to modify an object is by applying a method to it. A method can be 
thought of as an action operating on an object to produce a result. Methods are applied 
using the expression 


object .method (values) 


where object is a reference to an object, method is the name of the method that can 
be applied to the object, and values is a comma-separated list of values associated 
with that method. You applied an object method in the previous session when you ran 
the command: 


window.alert ("Welcome to Tulsa") 


In this command, the window object represents the browser window and the alert () 
method is a method that displays a dialog box within the browser window. The text 
string “Welcome to Tulsa” is the value associated with the alert () method that sets 
the text of the dialog box. 

Similarly, the getElementById() expression is a method applied to the document 
object in order to reference a particular object within the document based on its 
ID value. 

Now that you have learned the basic syntax of objects, properties, and methods, you 
can use JavaScript to write content into a web page. 
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Writing HTML Code 


The HTML code that is stored within a page element can be referenced using the 
following innerHTML property 


element .innerHTML 


where element is an object reference to an element within the web document. For 
example, if the document contains the following div element 


<div id="daysLeft">58<br /><span>Days</span></div> 
then the expression 
document .getElementById("daysLeft") .innerHTML 


returns the text string “58<br /><span>Days</span>”. Notice that both HTML tags and 
text content are returned by the innerHTML property. To change the content of this div 
element so that it contains the HTML code “45<br /><span>Days</span>”, you could 
change the value of the innerHTML property in the following command: 


document .getElementById("daysLeft") .innerHTML = 
"45<br /><span>Days</span>"; 


Changing the value of the innerHTML property overwrites whatever content is 
currently contained within the selected object, so you should be careful when using it 


The innerHTML propert : oe 
eae to rewrite the content of elements that already exist in your document. 


can only be applied to an 


object representing an Hector has set up his web page with the following div element containing date and 
element within the web time values: 
document. 


<div id="dateNow">11/3/2021<br />2:45:12 p.m.</div> 


Use the innerHTML property to change the content of this div element to the 
text string “m/d/y<br />h:m:s”. Note that you will replace this text string later with 
calculated values representing the current date and time. 


To write HTML code with JavaScript: 


D 1. If you took a break after the previous session, make sure the tny_script.js file 
is open in your editor. 


D2. Directly below the */ line in the comments area, insert the following code: 


Figure 9-14 highlights the newly added code. 
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Figure 9-14 Changing the value of the HTML code within an element 


the innerHTML property 
references the HTML 
code within the element 


references the 
element with the ID 
attribute “dateNow” 


the cultrent date and time * 
document. getE LementById("dateNow").innerHTML = 
"m/d/y<br />him:s"3 
ee pete 


sets the new value 
for the HTML code 
within the element 


BD 3. Save your changes to the file and then reload the tny_clock.html file in 
your browser. 
Figure 9-15 shows the content written by revising the value of the innerHTML 
property. 


Figure 9-15 Revised date and time content 


content written 
with JavaScript 
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Figure 9-16 lists other JavaScript properties and methods that can be used to modify 
the content of page elements. 
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Figure 9-16 Properties and methods to insert content 


Property or Method Description 
element .innerHTML Returns the HTML code within element 
element .outerHTML Returns the HTML code within element as well as the 


HTML code of element itself 


element .textContent Returns the text within element disregarding any HTML tags 
element .insertAdjacentHTML Inserts HTML code defined by text into element 
(position, text) at position, where position is one of the 


following: 'beforeBegin' (before the element's opening 
tag), 'afterBegin!' (right after the element's opening tag), 
'beforeEnd' (just before the element's closing tag), or 
‘afterEnd' (after the element's closing tag) 


For example, if a page element contains only text and no HTML markup, you can 
modify its content more efficiently using the text Content property. In the tny_clock.html 
file, Hector has placed the countdown values in the following span elements: 


<div><span id="days">53</span><br />Days</div> 
<div><span id="hrs">9</span><br />Hours</div> 
<div><span id="mins">14</span><br />Minutes</div> 
<div><span id="secs">48</span><br />Seconds</div> 


Use the text Content property now to change the days, hours, minutes, and 
seconds values to the text strings “dd”, “hh”, “mm”, and “ss”. 


To write text content with JavaScript: 
BD 1. Return to the tny_script.js file in your editor. 
D 2. At the bottom of the file, insert the following code: 


/* Display the time left until New Year's Eve */ 


document.getElementById("days") .textContent = "dd"; 
document.getElementById("hrs").textContent = "hh"; 
document .getElementById("mins") .textContent = "mm"; 
document.getElementById("secs") .textContent = "ss"; 


Figure 9-17 highlights the newly added code. 
Figure 9-17 Revised text content 
the current date and time 


document. getElementById("dateNow").innerHTML = 
"m/d/y<br />him:s"5 


/* Display the time Left until New Year's Eve */ 
document. getElementById("days").textContent = "dd"; 
document. getElementById("hrs").textContent = "hh"; 
document. getElementById("mins").textContent = "mm"; 
document. getElementBylId("secs").textContent = "ss"3 


t t t 
references the element property for the new text content 
with the IDs "days", "hrs", text content within within each 


"mins", and "secs" each element element 
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BD 3. Save your changes to the file and reload the tny_clock.html file in your 


browser. 


Figure 9-18 shows the placeholder text used for countdown clock values. 


Figure 9-18 Revised text content 
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Note that if you want to insert HTML code along with the text content, you must 
use the innerHTML property. The text Content property should only be used when no 
markup tags are involved. 


INSIGHT 


Writing Content with document.write() 


Another way to write HTML content to the web page document is with the following 
method 


document.write (text) 


where text is the text of the content. The document . write () method is most often 
used with embedded scripts, writing content directly into the document as it is being 
loaded by the browser. For example, the following code uses an embedded script to 
write an h1 heading directly into the page header: 


<header> 
<script> 
document .write("<hl>Welcome to Tulsa</h15") ; 
</script> 
</header> 


Note that if this method is applied after the HTML file is completely loaded by the 
browser, it will overwrite all of the HTML content in the document, replacing the HTML 
code with the text specified in the document .write() method. If you want to modify 
the page after it has been loaded by the browser, you should only use the innerHTML 
or textContent properties. 


Next, you will begin replacing the current date, time, and countdown placeholder 
values with calculated values. To do that, you must learn how to work with JavaScript 
variables. 
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Working with Variables 


Because you used a specific text string with the innerHTML and text Content 
properties, your script did little more than what you could have accomplished by 
entering the HTML code directly into the web page document. JavaScript is much more 
powerful and versatile when used in conjunction with variables. A variable is a named 
item in a program that stores a data value, such as a number or text string, or an object, 
such as a part of the web browser or browser window. Variables are useful because 
they can store information created in one part of the script and use that information 
elsewhere. 


Declaring a Variable 


Variables are introduced into a script by declaring the variable using the following 
var keyword 


var variable = value; 


where variable is the name assigned to the variable and value is the variable’s initial 
value. For example, the following statement declares a variable named currentDay and 
assigns it an initial value of “May 3, 2021”. 


var currentDay = "May 3, 2021"; 


You do not have to provide an initial value to a variable. You can leave the variable’s 
value undefined as in the following command which declares the currentDay variable 
but does not provide a value. 


var currentDay; 


You can declare multiple variables by entering the variable names in a comma- 
separated list. The following statement declares two variables named currentMonth, 
and currentYear, assigning them the values of “May” and 2021 respectively. 


var currentMonth = "May", currentYear = 2021; 
JavaScript imposes the following limits on variable names: 


e The first character must be either a letter or an underscore character (_ ). 

¢ The remaining characters can be letters, numbers, or underscore characters. 

e Variable names cannot contain spaces. 

e You cannot use names that are part of the JavaScript language itself; for example, you 
cannot name a variable “document” or “window” or “textContent’. 


Like other aspects of the JavaScript language, variable names are case sensitive. 


ars, ; The variable names currentDay and currentday represent two different variables. One 
oO avola programming 


enerenlee icone stent common programming mistake is to forget this important fact and to use uppercase and 
pattern of case for variable lowercase letters interchangeably in variable names. 
names and give your After a variable is declared, its value can be changed by assigning a new value using 


variables descriptive 
names that are easy to 
interpret. variable = value; 


the following command 


where variable is the variable name and value is a new value assigned to the 
variable. Thus, the following command changes the value of the currentDay variable to 
“May 4, 2021”: 


currentDay = "May 4, 2021"; 


One of the advantages of using variables is that you can change their values 
several times throughout the program, often in response to user actions within the 
web page. 
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If you enclose a number 
within double or 

single quotation marks, 

JavaScript will treat the 

number as a text string. 


Variables and Data Types 


JavaScript variables can store different types of information known as the variable’s 
data type. JavaScript supports the following data types: 


® numeric value 
text string 

¢ Boolean value 
° object 

e null value 


A numeric value is any number, such as 13, 22.5, or 3.14159. Numbers can also 
be expressed in scientific notation, such as 5.1E2 for the value 5.1 x 10? (or 510). 
Thus, if you wish to store the value 2021 in the currentYear variable, you would run 
the command 


currentYear = 2021; 


A text string is any group of characters enclosed within either double or single 
quotation marks. The following statement stores the text “May” in the currentMonth 
variable: 


currentMonth = "May"; 


A Boolean value indicates the truth or falsity of a statement. There are only two 
possible Boolean values: true or false. For example, the following statement sets the 
value of the isMay variable to true and the value of the isApril variable to false: 


var isMay = true, isApril = false; 


Boolean values are most often used in programs that must respond differently 
to different conditions. The isMay variable cited above might be used in a program 
that tests whether the current month is May. If the value is set to true, the program 
runs differently than if the value is set to false. Note that if no value is assigned to a 
Boolean variable, it is interpreted as having a value of false. 

Variables that represent objects can be used to simplify code by removing the need 
to rewrite long and sometimes complicated object references. Thus, the following 
dateDiv variable will store the reference to the document element with the ID 
dateNow: 


var dateDiv = document .getElementById("dateNow") ; 


Finally, a null value indicates that no value has yet been assigned to a variable. This 
can be done explicitly assigning the keyword null to a variable, as in the statement 


var currentDate = null; 


or implicitly by simply declaring the variable without assigning it a value. 


INSIGHT 
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JavaScript and Weakly Typed Languages 


In JavaScript, a variable’s data type can be changed by the context in which it is used. 
In the following two statements, the currentMonth variable starts out as a numeric 
variable with an initial value of 4, but then becomes a text string variable containing 
the text “May”: 


var currentMonth = 4; 
currentMonth = "May"; 


A programming language like JavaScript, in which variables are not strictly tied 
to specific data types, is referred to as a weakly typed language. Some other 
programming languages, known as strongly typed languages, force the programmer 
to explicitly identify a variable’s data type. In strongly typed languages, the above 
code would result in an error because variables are not allowed to switch from one 
data type to another. 

While a strongly typed language might seem restricting, it has the advantage of 
flagging programming errors, such as might occur when your program inadvertently 
switches the data type of a variable from a number to a text string. 


Using a Variable 


After you have created a variable, you can use it in JavaScript statements in place of 
the value it contains by inserting the variable name into a command or expression. For 
example, the following code uses the dateDiv variable to reference the page element 
with ID dateNow and then applies the innerHTML property to that object: 


var dateDiv = document.getElementById("dateNow") ; 
dateDiv.innerHTML = "May 3, 2021"; 


The effect is the same as if you had inserted the following command into your program: 
document .getElementById("dateNow") .innerHTML = "May 3, 2021"; 


The advantage of using a variable is that having defined the dateDiv variable, you 
can use it throughout the program without having to reenter a long and complicated 
object reference every time, which speeds up the execution of the code and makes 
your program easier to read and manage. 


Working with Date Objects 


One type of object you can store in a variable is a Date object, which is a built-in 
JavaScript object used to store information about dates and times. Date objects are 
defined using the following expression 


new Date("month day, year hrs:mins:secs") ; 


where month, day, year, hrs, mins, and secs provide the Date object's date and time. 
For example, the following command stores a Date object containing a date of May 23, 
2021 and a time of 2:35:05 p.m. in the thisDate variable: 


var thisDate = new Date("May 23, 2021 14:35:05"); 


Note that time values are based on 24-hour time so that a time of 2:35 p.m. would 
be entered as 14:35. If you omit the hours, minutes, and seconds values, JavaScript 
assumes that the time is 0 hours, 0 minutes, and 0 seconds—in other words, 
midnight of the specified day. If you omit both a date and time value, the Date object 
returns the current date and time based on the computer's system clock. Thus, the 
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following command stores a Date object containing the current date and time in the 
thisDate variable: 


var thisDate = new Date(); 

You can also define a date using the expression 

new Date(year, month, day, hrs, mins, secs) ; 
where year, month, day, hrs, mins, and secs are numeric values for the date and time. 
The month value is entered as an integer from 0 to 11, where O = January, 1 = February, 


and so forth. Time values are again expressed in 24-hour time. Thus, the following 
command also creates a variable storing the date and time May 23, 2021, at 2:35:05 p.m.: 


var thisDate = new Date(2021, 4, 23, 14, 35, 5); 


Creating and Storing a Date 


° To create a Date object, use 
new Date("month day, year hrs:mins:secs") 


where month, day, year, hrs, mins, and secs indicate the date and time to be 
stored in the Date object. Time values are entered in 24-hour time. 
e To create a Date object using numeric values, use 


REFERENCE 


new Date(year, month, day, hrs, mins, secs) 


where year, month, day, hrs, mins, and secs are numeric values of the date and 
time with month an integer from 0 to 11, where O = January, 1 = February, and so 
forth. Time values are entered in 24-hour time. 

e To create a Date object containing the current date and time, use: 


new Date () 


Creating a Date Object 


Now that you have seen how to store date and time information in a variable, you will 
create a variable named currentDay that stores a Date object. You use May 23, 2021 as 
the initial date and 2:35:05 p.m. as the initial time. Later in this tutorial, you will set the 
value of the currentDay variable to the current date and time. For now, using a preset date 
and time lets you check that any calculations based on the date and time are correct. 


To create the currentDay variable: 
BD 1. Return to the tny_script.js file in your editor. 
D 2. Directly below the closing */ line near the top of the file, insert: 


/* Store the current date and time */ 
var currentDay = new Date("May 23, 2021 14:35:05"); 


Figure 9-19 highlights the newly added code. 


Figure 9-19 Creating a Date object 


/* Store the current date and time */ 
var currentDay = new Date("May 23, 2021 14:35:05"); 


date and time stored 
in the Date object 


declares the 
currentDay variable 


creates a 
Date object 


Tutorial 9 Getting Started with JavaScript | HTML 5 and CSS HTML 713 


Next, you apply JavaScript’s Date methods to extract information about this Date object. 


Applying Date Methods 


JavaScript dates are stored as numeric values equal to the number of milliseconds 
between the specified date and January 1, 1970 at midnight. For example, a 

Date object for May 23, 2021 at 2:35:05 p.m. has a hidden value equal to 
1,621,798,505,000 milliseconds. Fortunately, you don’t have to work directly with this 
value! Instead, Figure 9-20 describes some of the JavaScript methods used to extract 
information from a Date object. 


Figure 9-20 Methods of the Date object 


Date Method Description Results 
var thisDay = new thisDay.getSeconds() seconds 5 
Date("May 23, 2021 thisDay.getMinutes() minutes 35 
14:35:05"); 
thisDay.getHours() hours 14 
thisDay.getDate() day of the month 23 
thisDay.getMonth() month number, where 4 
January = 0, February =1, etc. 
thisDay.getFullYear() year 2021 
thisDay.getDay() day of the week, where 0 
Sunday = 0, Monday = 1, etc. 
thisDay.toLocaleDateString() text of the date using local "5/23/2021" 


conventions 


thisDay.toLocaleTimeString() text of the time using local "2:35:05 PM" 
conventions 


Hector wants to display the date and time on separate lines in the page header. To 
accomplish this, you create two new variables. The following dateStr variable will store 
the text string of the date portion of the Date object and the timeStr variable will store 
the text string of the time portion: 


var dateStr = currentDay.toLocaleDateString() ; 
var timeStr = currentDay.toLocaleTimeString() ; 


Both the toLocaleDateString() and toLocaleTimeString() methods return text 
strings based on local conventions for rendering dates and times. Thus, in the United 
States the dateStr and timeStr variables will store the text “5/23/2021” and “2:35:05 PM” 
respectively. Other countries, with different local conventions, will use different text 
representations of these dates and times. 

The dateStr and timeStr variables can be used with the innerHTML property for the 
dateNow div element to change the code inserted into the page element: 


document .getElementById("dateNow") .innerHTML = 
dateStr + "<br />" + timeStr; 


The + symbol is used in this command to combine two or more text strings in a single 
text string. Thus, in this command if the dateStr variable stores the text “5/23/2021” and 
the timeStr variable stores the text string “2:35:05 PM”, the text string “5/23/2021<br /> 
2:35:05 PM” will be added to the inner HTML of the dateNow element. 
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Using Date Methods 


° To retrieve the year, month, day, hours, minutes, and seconds value from a Date 
object, use the following methods 


date.getFullYear () 
date.getMonth () 
date.getDate() 
date.getHours () 
date.getMinutes () 
date.getSeconds () 


REFERENCE 


where date is a Date object. 
¢ To retrieve the date as a text string using local conventions, apply the method: 


date.toLocaleDateString() 
¢ To retrieve the time as a text string using local conventions, apply the method: 


date.toLocaleTimeString () 


Rewrite the code in the tny_script.js file now to use Date objects and methods to 
display dates and times. 


To apply date variables and methods: 
BD 1. Directly after the line declaring the currentDay variable, insert: 


var dateStr = currentDay.toLocaleDateString() ; 
var timeStr = currentDay.toLocaleTimeString() ; 


BD 2. Change the line that displays the current date and time to: 


document .getElementById("dateNow") .innerHTML = 
dateStr + "<br />" + timeStr; 


Figure 9-21 highlights the new code in the file. 


Figure 9-21 Displaying dates and times 


the toLocaleDateString() method 
returns the text of the current 
date using local conventions 


declares the dateStr variable 
containing the text string of 
the current date 


Store the current date and time 
var currentDay = new Date("May 23y 2021 14:35:05"); 
var dateStr = currentDay.toLocaleDateString() ; 
var timeStr = currentDay.toLocaleTimeString() ; 


declares the timeStr variable Display the current date and ey 
containing the text string of | | document. getElementById("dateNow").innerHTML = 


the current time dateStr + “<br />" +. timeStr; 


the toLocaleTimeString() 
method returns the text of 
the current time using local 
conventions 


displays the 
value of the 
timeStr variable 


the + symbol combines 
multiple text strings 
into a single text string 


displays the 
value of the 
dateStr variable 
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BD 3. Save your changes to the file and then reload tny_clock.html in your browser. 
Figure 9-22 shows the date values generated by JavaScript. 


Figure 9-22 Date and time in the page header 


text string of the date and 
time as returned from the 
toLocaleDateString() and 
toLocaleTimeString() 
methods 
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LY 


Written Communication: Writing Dates and Times for a Global 
Marketplace 


> 


The Tulsa New Year's Bash is a strictly local event; thus, you can write the dates and 
times using local formats. However, America’s date and time conventions are not 
shared across the globe. If you are not careful with your dates and times, you run the 
risk of confusing your international readers. For example, the text string 10/3/2021 

is interpreted as October 3rd, 2021 in some countries, and as March 10th, 2021 in 
others. Some countries express times in a 12-hour (AM/PM) format while others use 
the 24-hour clock. 

If you expect your dates and times to be read by an international audience, you 
need to ensure that your text corresponds to local standards. One way to do this is to 
spell out the month portion of the date, expressing a date as “October 3, 2021”. 
Other designers suggest that a date format with the year expressed first (for example, 
2021-10-3) is less likely to be misinterpreted. 

With JavaScript, you can write dates and times in the user's own local format 
using method 

date.toLocaleString () 
which converts date to a text string displaying the date and time formatted based 
on the conventions employed by the user's computer. Thus, a date and time such as 
October 3rd, 2021 at 2:45 p.m. would be displayed using the toLocaleString () 
method as 

Tue, October 3, 2021 2:45:00 PM 
from a computer located in the United States and as 

mardi 3 octobre 2021 1714:45:00 
from a computer located in France. Note that the exact appearance of the string 
generated by the toLocaleString() method depends on the date/time settings on 
the computer and the settings of the browser. 

As businesses continue to expand to meet the needs of a global market, you 
should use JavaScript’s Date object in a way that makes it easier to communicate with 
your international customers and clients in a “timely” fashion. 


PROSKILLS 
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Setting Date and Time Values 


JavaScript also supports methods to change the date stored within a Date object. 
Changing dates is most often used in programs that involve setting the value of a 

future date or time, such as an expiration date for an online membership or an online 
calendar used for event scheduling. Figure 9-23 summarizes the methods supported by 
the JavaScript Date object used for setting date and time values. 


Figure 9-23 JavaScript methods to set values of the Date object 


Date Method Description 

date.setDate(value) Sets the day of the month of date, where value is an integer, ranging 
from 1 up to 31 (for some months) 

date.setFullYear(value) Sets the four-digit year value of date, where value is an integer 

date.setHours(value) Sets the 24-hour value of date, where value is an integer ranging 
from 0 to 23 

date.setMilliseconds(value) Sets the millisecond value of date, where value is an integer 
between 9 and 999 

date.setMinutes(value) Sets the minutes value of date, where value is an integer ranging 
from 0 to 59 

date.setMonth(value) Sets the month value of date, where value is an integer ranging from 
0 (January) to 11 (December) 

date.setSeconds(value) Sets the seconds value of date, where value is an integer ranging 
from 0 to 59 

date.setTime(value) Sets the time value of date, where value is an integer representing 


the number of milliseconds since midnight on January 1, 1970 


For example, the following code uses the set FullYear() method to change the 
date stored in the thisDate variable from May 23, 2021 to May 23, 2022: 


var thisDate = new Date("May 23, 2021"); 
thisDate.setFullYear (2022) ; 


In the next session, you will use the setFullYear() method in the countdown 
clock to calculate the number of days, hours, minutes, and seconds remaining until 
the New Year's Bash. If you want to take a break, you can close your editor and your 
browser now. 
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REVIEW 


ession 9.2 Quick Check 


1. Which of the following is a type of JavaScript object? 


a. built-in JavaScript objects 

b. browser objects contained within the browser itself 
c. document objects contained with the web page 

d. all of the above 


. Which expression references all paragraph elements in the document? 


a. document .paragraphs 

b. document .all.paragraphs 

c. document .getElementsByTagName ("p") 
d. document .get Paragraphs () 


. Which expression references an element with the ID sidebar? 


a. document#sidebar 

b. document .id.sidebar 

c. document .getElementById ("sidebar") 
d. document .getIDS ("sidebar") 


. The HTML code stored within a page element is referenced with the property: 


a. innerHTML 
b. html 

c. htmlCode 
d. innerCode 


. The HTML code stored within a page element is referenced with the property: 


a. innerText 
b. textContent 
c. text 

d. textString 


. Which command declares the variable totalMonths with an initial value of 122 


a. variable totalMonths = 12; 
b. var totalMonths (12) ; 
c. var 12 = totalMonths; 
d. var totalMonths = 12; 


. Which command creates a Date object for the date April 4, 2021 


at 8:38:14 a.m.? 

a. Date("April 4, 2021 8:38:14"); 

b. new Date ("April 4, 2021 8:38:14"); 
c. new date("April 4, 2021 8:38:14"); 
d. dateValue ("April 4, 2021 8:38:14"); 


. Which expression extracts the hours value from the expDate variable? 


a. expDate.getHours () 
b. expDate. hours () 

c. expDate.hours 

d. expDate.calcHours () 
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Session 9.3 Visual Overview: 


The runClock() 
statement runs the 
commands in the 
runClock() function. 


The setInterval() 
method is used to 
repeatedly runa 
command after an 
interval expressed in 
milliseconds. 


ee a: runClock() { 
2 


Every function begins ira = new Date("November 17, 2021 16:28:49"); 


runClock(); 
setInterval("runClock()", 1 5 


with the keyword — tr = currentDay.t test Q); 

function followed by vel tr = currentDay.t eSt (); 

the function name and 

parameters (if any) 

enclosed in parenthesis. document. get t ("dateNow"). erHTML = 
4 dateStr + "<br " + timeStr; 


The setFullYear() 
method sets the year 


eh s var ‘ ea new Date("January 1, The getFullYear() 
value in the Date object. wae waeeati = currentDay. method returns the 
a ~ newYear.setFullYear (nextYear) ; 4-digit year value. 
This code converts the val ’ eft = (newYear - currentDay) /(1008 *66*66*24 
difference in dates — = This coda converts 
(stored as milliseconds) ' t the fractional part 
\_ into a difference in days. } var ft = (daysLeft - Math. (daysLeft))*24;) of hrsLeft value to 
minutes. 
Ge >) ‘ | 
This code converts the 
fractional part of the var é t= (hrsLeft = Math. floor (hrsleft))* ; 
daysLeft value to hours. val = (minsLeft - Math. floor(minsLeft) )*60; 
Xe ae ie ee ee 


Gre code converts the 


y document. get t days"). text tent = Math. (daysLeft); 
fractional part of 


ac erele document. get ont ("hrs"). text tent = Math. (hrslett) ; 
wad ue to document. gett , ("mins"). text tent = Math. (minsLeft) ; 
(_seco Ss. ) document. get Ree (“secs”). text tent = Math. (secsLeft); 
1 
J : 
The Math.floor() 


method rounds the 
enclosed value down 
to the nearest integer. 


The days, hours, minutes, and 
seconds values are displayed 
as whole numbers due to the 
Math.floor() method. 
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The days, hours, minutes, and 
seconds left values are 

updated every second due to 
the setInterval() method. 
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Working with Operators and Operands 


In the previous session, you worked with Date objects to display specified dates 
and times on a web page. In this session, you will learn how to perform calculations 
with dates and JavaScript variables. To perform a calculation, you need to insert 

a JavaScript statement that contains an operator. An operator is a symbol used to 
act upon an item or a variable within an expression. The variables or expressions 
that operators act upon are called operands. Figure 9-24 describes the operators 
supported by JavaScript. 


Figure 9-24 JavaScript operators 


To insert single quotation 
marks into a text string, 
you must enclose the text 
string with double quota- 
tion marks. 


Operator Description Expression Returns 

+ Combines or adds two items 12 +3 15 

- Subtracts one item from 12-3 9 
another 

* Multiplies two items 12*3 36 

/ Divides one item by another 12/3 4 

% Returns the remainder after 18%5 


dividing one item by another 


++ Increases a value by 1 12++ 13 
-- Decreases a value by 1 12-- 11 
- Changes the sign of a value -12 -12 


Note that the + operator is used to add two or more numbers to calculate a sum, but 
as you saw in the last session it can also be used to combine two or more text strings 
into a single text string. The following command shows an expression that uses the + 
operator to combine several text strings: 


"<img src='" + imgFile + "' alt='!' />" 


If the imgFile variable stores the text string “logo.png”, this expression would return the 
text string "<img src='logo.png' alt="/>". 

Operators are organized into binary operators, like + and —, which work with two 
operands in an expression and unary operators, which work on only one operand. 
One such unary operator is ++ (also known as the increment operator), which 
increases the value of the operand by 1. For example, the following two commands 
both increase the value of the x variable by 1; the first uses the + operator and the 
second uses the increment ++ operator: 


x = xX +1; 
X++; 


A similar operator is the decrement operator, indicated by the — — symbol, which 
decreases the operand’s value by 1. 


Using Assignment Operators 


Another type of operator is the assignment operator, which is used to assign a value to 
an item. Figure 9-25 lists the different JavaScript assignment operators. 
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Figure 9-25 JavaScript assignment operators 


Operator Example Equivalent To 
= x=y x=y 

+= x+=y xX=xty 

—= x-=y X=X-y 

ke x*=y xX=x*y 

/= x/=y x=x/y 

Y= x = y x=x %y 


The most common assignment operator is the equal sign ( = ), which assigns the 
value of one expression to another. JavaScript also allows you to combine the act of 
assigning a value and changing a value within a single operator. For example, both of 
the following expressions increase the value of the x variable by 2 but the += operator 
does so more efficiently. 

xX = X + 2; 

xX += 2; 

Do not insert a space After you master the syntax, you can use assignment operators to create efficient and 


Between the symbols compact expressions. 
in the += operator or 


JavaScript will report a 


syntax error. Calculating the Days Left in the Year 


You will use operators and Date objects to calculate the number of days remaining 
until the New Year's Bash. To calculate this value, you need to do the following: 


1. Create a Date object for January 1st of the next year 
2. Calculate the difference between the current date and the upcoming January 1st 


To create the January 1st Date object, you first declare the following newYear variable: 
var newYear = new Date("January 1, 2022"); 


Using 2022 for the year is only a temporary step. The end goal is to create a Date 
object for January 1st of the upcoming year (whenever that may be). You can determine 
this value by extracting the year value from the currentDay variable you created in the 
last session and adding 1 to it using the following command: 


var nextYear = currentDay.getFullYear() + 1; 


Then, by applying the setFullyear() method, change the year of the newYear Date 
object to the coming year as follows: 


newYear.setFullYear (nextYear) ; 


With the newYear variable now containing a date matching the upcoming January 
Ist, the following command calculates the time difference between that date and the 
current day: 


var daysLeft = newYear - currentDay; 


However, because JavaScript measures time difference in milliseconds, not days, the 
daysLeft variable stores the number of milliseconds between January 1st and the current 
date. To express this value in days, you need to divide the difference by the number 
of milliseconds in one day. Because there are 1000 milliseconds in one second, 60 
seconds in one minute, 60 minutes in one hour, and 24 hours are in one day, the 
revised command becomes: 


var daysLeft = (newYear - currentDay) / (1000*60*60*24) ; 
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Add all of these commands to the tny_script.js file to calculate the days between the 
current date and upcoming January 1st. 


To calculate the days left until the new year: 


D 1. If you took a break after the previous session, make sure the tny_script.js file 
is open in your editor. 


D 2. Directly above the comment /* Display the time left until New Year's Eve */, 
insert the following code: 


/* Calculate the days until January 1st */ 

var newYear = new Date("January 1, 2021"); 

var nextYear = currentDay.getFullYear() + 1; 
newYear.setFullYear (nextYear) ; 

var daysLeft = (newYear - currentDay) / (1000*60*60*24) ; 


D 3. Replace the text string “dd” in the first line below the “Display the time left 
until New Year's Eve” comment with the daysLeft variable. 


Figure 9-26 describes the newly added code. 


Figure 9-26 Calculating the days left before the next January 1st 


* Display the current date and time 


document. getElementById("dateNow").innerHTML = 
ects the initial value of dateStr + "<br />" + timeStr; adds 1 to the 
year value of 


* 


the newYear variable 
" /* Calculate the days until January ist */ the currentDay 
| —s newYear = new Date("January 1, 2021"); (Variable 

var nextYear = currentDay.getFullYear() + 13 
newYear.setFullYear (nextYear) 5 

var daysLeft = (newYear - currentDay) /(1000*60*60*24) ; 


changes the year value 
of the newYear Date 
variable so that it 
contains the next 
January 1 date after 
currentDay 


Display the time left until New Year's Eve 


doqument.getE LementById("days").textContent = daysLeft; 


( calculates days left by 
converting the time 
difference from 

milliseconds to days 


replaces the “dd” text 
string with the daysLeft 
variable 


BD 4. Save your changes to the file and then reload tny_clock.html in your browser. 


Figure 9-27 shows the calculated days until January 1st for the sample date 
of May 23, 2021. 
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Figure 9-27 Days left until January 1st 


calculated value of the 
daysLeft variable 


eee - 44396998 THB 74 HH 


RAYS HOURS 


Tulsa Times Calendar City Links 
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Trouble? If no value appears for the daysLeft variable, you might have made 
an error when entering the code. Use your browser debugger to check your 
code against the code shown in Figure 9-26, making corrections as needed. 
Save the file and then reload the web page. 


The value displayed in the daysLeft field is 222.43396... (the clock font displays a 
decimal point as --), indicating that almost 222 and a half days are left until the start 
of the New Year’s Bash. The fractional part of the value represents how much of the 
current day is remaining, which in this case is about 0.434 days. Since Hector wants 
the countdown clock to display the days, hours, minutes, and seconds until the party 
begins as integers, you have to modify the results by converting the fractional values to 
integer values expressed in hours, minutes, and seconds. You can do this by using some 
of the built-in JavaScript functions for mathematical calculations. 


Working with the Math Object 


One way of performing these types of calculations is to use JavaScript’s Math object. 
The Math object is a built-in object used for performing mathematical tasks and storing 
mathematical values. 


Using Math Methods 


The Math object supports several different methods for calculating logarithms, 
(Goes Seo One extracting square roots, returning trigonometric values, and so forth. The syntax for 
applying the Math object; applying a Math method is 
you must use Math 
instead of math as the 
ob setineme: where method is the method you apply to a mathematical expression. Figure 9-28 lists 
the JavaScript Math methods and their descriptions. 


Math. method (expression) 
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Methods of the Math object 


Method Description Example Returns 

Math.abs(x) Returns the absolute value of x Math.abs(-5) 5 

Math.ceil(x) Rounds x up to the next highest integer Math.ceil(3.58) 4 

Math.exp(x) Raises e to the power of x Math.exp(2) e* (approximately 7.389) 
Math.floor(x) Rounds x down to the next lowest integer Math.floor(3.58) 3 

Math.log(x) Returns the natural logarithm of x Math.log(2) 0.693 

Math.max(x, y) Returns the larger of x and y Math.max(3, 5) 5 

Math.min(x, y) Returns the smaller of x and y Math.min(3, 5) 3 

Math.pow(x, y) Returns x raised to the power of y Math.pow(2,3) 23 (or 8) 

Math.rand() Returns a random number between 0 and1 —_-Math.rand() Random number between O and 1 
Math.round(x) Rounds x to the nearest integer Math.round(3.58) 4 

Math.sqrt(x) Returns the square root of x Math.sqrt(2) approximately 1.414 


Because the countdown clock will display only the integer portion of the days left, 
you will apply the Math. £loor() method, which rounds a value down to the next 
lowest integer, to the daysLeft variable. For the 222.4339... value currently in the 
countdown clock, this method returns the integer value 222. 


To apply the Math.floor() method: 
BD 1. Return to the tny_script.js file in your editor. 


D 2. Apply the Math. floor () method to the command that displays the value of 
the daysLeft variable, changing it to: 


document .getElementById("days") .textContent = 
Math. floor (daysLeft) ; 


Figure 9-29 highlights the revised code in the command. 


Wmlinneh a nae 


Dj 7 ay the time Left u it i 1 New Year's Eve 


document. getElementById("days").textContent = Math. floor(daysLeft) ; 


rounds the daysLeft 
value down to the next 
lowest integer 


BD 3. Save your changes to the file and then reload the tny_clock.html file in your 
browser. Verify that 222 days with no decimal places are now shown in the 
countdown clock. 


The difference between the exact days left in the year 222.43396... and the rounded 
value 222 is 0.43396..., which represents the fractional part of the current day left until 
the New Year's Eve Bash. Hector wants this value expressed in hours, which you can 
calculate by multiplying the fraction part by 24 (the number of hours in a single day) 
using the following command: 


var hrsLeft = (daysLeft - Math.floor(daysLeft) )*24; 
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As with the daysLeft variable in the previous set of steps, you need to round this 
value down to the next lowest integer using the Math. floor () method so that the 
integer portion only is displayed in the countdown clock. 


To calculate the hours left: 
BD 1. Return to the tny_script.js file in your editor. 


D2. Directly below the line declaring the daysLeft variable, insert: 


BD 3. Change the command that displays the text string “hh” as the hours left to: 


document.getElementById("hrs").textContent = 
Math. floor (hrsLeft) ; 


Figure 9-30 highlights the code to calculate and displays the hrsLeft variable. 


Figure 9-30 Calculating the hours left in the current day 


var daysLeft = (newYear - currentDay) /(1000*60*60*24) ; 


/* Calculate the hours left in the current day */ 
var hrsLeft = (daysLeft - Math. floor (daysLeft) )*24; 


calculates the fractional 
part of the current day in 
terms of hours 


Display the time Left until New Year's Eve */ 

document. getElLementById("days").textContent = Math. floor (daysLeft) ; 
document. getELementById("hrs").textContent = Math. floor (hrsLeft) ; 
document. getElementById("mins").textContent = "mm"; 


document. getElementById("secs").textContent = "ss"; 


displays the integer 
part of hours left 


BD 4. Save your changes to the file and then reload tny_clock.html in your browser. 
Figure 9-31 shows the hours left in the current day. 


Figure 9-31 Days and hours left until January 1st 


number of hours left 
in the current day 


number of days left NAKA 
in the current year Cy meet . 
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You may have noticed that JavaScript appears to have reported an extra hour in the 
day. The total is accurate since the current time is given as 2:35:05 p.m. but JavaScript 
reports that 10 hours are left. The extra hour comes from daylight savings time, which 
moves the clock backward one hour in the autumn, adding an extra hour to the overall 
calculation. Because the time interval between May 23 and January 1st includes 
the switch to daylight savings time, the extra hour appears in the hours part of the 
countdown clock. 

Complete the countdown clock by calculating the minutes left in the current hour 
and the seconds left in the current minute. The technique to calculate the minutes 
left in the current hour is similar to the one you used to calculate the hours left in the 
current day. You multiply the difference between the hrsLeft value and the whole hours 
value by 60 (the number of minutes in an hour) to express the fractional part in terms 
of minutes, as shown in the following command: 


var minsLeft = (hrsLeft - Math.floor(hrsLeft) ) *60; 


Finally, to calculate the seconds left in the current minute, you multiply the 
fractional part of the minsLeft variable by 60 (the number of seconds in a minute), as 
follows: 


var secsLeft = (minsLeft - Math.floor(minsLeft) ) *60; 


As with the daysLeft and hrsLeft variables, you want to display only the integer part 
of the minsLeft and secsLeft variables by using the Math. floor () method. Add these 
commands to the script. 


To calculate the minutes and seconds left: 
BD 1. Return to the tny_script.js file in your editor. 


BD 2. Directly below the command to declare the hrsLeft variable, add the 
following code: 


/* Calculate the minutes and seconds left in the current hour */ 
var minsLeft = (hrsLeft - Math.floor(hrsLeft) ) *60; 
var secsLeft = (minsLeft - Math. floor (minsLeft) ) *60; 


D 3. Replace the “mm” and “ss” text strings in the countdown clock commands 
with values for the minsLeft and secsLeft variables rounded down to the next 
lowest integer using the Math. floor () method. The revised commands 
should appear as: 


document .getElementById("mins") .textContent 
Math. floor (minsLeft) ; 
document .getElementById("secs") .textContent 
Math. floor (secsLeft) ; 


Figure 9-32 highlights the code to calculate the minutes and seconds left in 
the year. 
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Figure 9-32 Calculating the minutes and seconds left 


var hrsLeft = (daysLeft - Math. floor (daysLeft) )*24; 


calculates the fractional 
part of the hours left in 
terms of minutes 


/* Calculate the minutes and seconds Left in the current hour */ 
[| sa minsLeft = (hrsLeft - Math. floor(hrsLeft) )*60; 


a hee secsLeft = (minsLeft - Math. floor (minsLeft) )*60; 


calculates the fractional * Display the € ft u L New Y s Eve 
document. getElementById("days").textContent = Math. floor (daysLeft) ; 


part of the minutes left 
in terms of seconds document.getElementById("hrs").textContent = Math. floor (hrsLeft) ; 
document. getElementById("mins").textContent = Math. floor(minsLeft) ; 


document. getElLementById("secs").textContent = Math. floor(secsLeft) ; 


displays minutes left 
and seconds left as 
whole numbers 


BD 4. Save your changes to the file and then reload tny_clock.html in your browser. 
The countdown clock values for the specified date are shown in Figure 9-33. 


Figure 9-33 Days, hours, minutes, and seconds left until January 1st 
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by days, hours, minutes, 
and seconds 


Another factor in time calculations is that the day is not evenly divided into seconds. 
A fraction of a second is always left over each day. As the days accumulate, these 
fractions of a second add up. Most time devices, such as atomic clocks, account for this 
accumulation by adding a leap second on certain days of the year. JavaScript includes 
leap seconds in its time calculations as well and thus, it may sometimes appear that the 
seconds value in the countdown clock is off by a second. 
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Using Math Constants 


Many functions require the use of mathematical constants, such as m and e. Rather 
than entering the numeric values of these constants directly into the code, you can 
reference the built-in constants stored in the JavaScript Math object. The syntax to 
access one of these mathematical constants is 


Math. CONSTANT 


where CONSTANT is the name of one of the mathematical constants supported by the 
Math object, shown in Figure 9-34. 


Figure 9-34 Math constants 


Constant Description 

Math.E The base of the natural logarithms (2.71828...) 
Math.LN10 The natural logarithm of 10 (2.3026...) 

Math.LN2 The natural logarithm of 2 (0.6931...) 

Math.LOG10E The base 10 logarithm of e (0.4343...) 

Math.LOG2E The base 2 logarithm of e (1.4427...) 

Math.PI The value of 77 (3.14159...) 

Math.SORT1_2 The value of 1 divided by the square root of 2 (0.7071...) 
Math.SORT2 The square root of 2 (1.4142 ...) 


For example, the formula to calculate the volume of a sphere is 47r?/3, where r is 
the radius of the sphere. To reference the value of 7 in the calculation of a sphere’s 
volume, you would apply the Math. PI constant. To cube the value of r, you would use 
the method Math.pow(r, 3). Putting these together, the code to calculate the volume 
of a sphere of 10 units would be as follows: 


var radius = 10; 
var volume = 4*Math.PI*Math.pow(radius, 3)/3; 


You don’t need to use any Math object constants for the New Year's Bash website. 
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Generating Random Numbers 


One of the most useful applications of JavaScript is to create dynamic pages that can 
change in a random fashion. A commercial website might need to display banner 

ads in a random order so that customers see a different ad each time they access the 
page. To create these kinds of effects, you need a script that generates a random 
value. JavaScript accomplishes this using the Math. random() method, which returns a 
random value between 0 and 1. You can change the range of possible random values 
using the expression 


INSIGHT 


lowest + size*Math.random() 


where lowest is the lower boundary of the range and size is the size of the range. 
For example, to generate a random number from 20 to 30, you could apply the 
following expression: 


10*Math.random() + 20; 


In many cases, you want to limit a random number to integer values. To do so, 
enclose the random value within the Math. floor () method as follows 


Math.floor (lowest + size*Math.random() ) 


where lowest is the smallest integer in the range and size is the number of integer 
values in the range. Thus, to generate a random integer from 21 to 30, you would apply 
the following expression: 


Math.floor(21 + 10*Math.random() ) ; 


Note that using the Math. floor () method guarantees that the random number is 
rounded down to the next lowest integer, which in this example limits it to a range of 
integers from 21 to 30. 


You will complete the calculations on the countdown clock so that instead of the 
sample date and time you used in this session, you will display the actual date and time 
based on your computer's clock. Recall that you can create a Date object showing the 
current date and time by using the expression 


new Date() 


with no parameter value for the object constructor. 


To use the current date and time: 
BD 1. Return to the tny_script.js file in your editor. 
BD 2. Change the command declaring the currentDay variable to: 


var currentDay = new Date(); 


Figure 9-35 highlights the revised command. 


Figure 9-35 Storing the current date and time 


date and time 


stores the current date 
and time in the 
currentDay variable 


/ Store 12 curl 
var currentDay = new'Date(); 

var dateStr = currentDay.toLocaleDateString(); 
var timeStr = currentDay.toLocaleTimeString()} 
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BD 3. Save your changes and then reload tny_clock.html in your browser. Verify that 
the browser displays the current date and time. 


BD 4. Continue to reload the web page and verify that each time you reload the 
page, the time and countdown clock are updated with the current values. 


Reloading the page updates the time and countdown values, but Hector would like 
your script to automatically update those values every second without requiring the 
user to reload the page. To create this effect, you first need to place all of the code you 
have written within a function. 


Working with JavaScript Functions 


When you want to reuse the same JavaScript commands throughout your web page, 
you store the commands in a function. A function is a collection of commands that 
performs an action or returns a value. Every function includes a function name that 
identifies it and a set of commands that are run when the function is called. Some 
functions also require parameters, which are variables associated with the function. 
The general syntax of a JavaScript function is 


function function _name (parameters) { 
commands 


where function_name is the name of the function, parameters is a comma-separated 
list of variables used in the function, and commands is the set of statements run by 
the function. As with variable names, a function name must begin with a letter or 
underscore ( _ ) and cannot contain any spaces. Also, like variable names, function 
names are case sensitive and thus, JavaScript treats names such as runClock and 
runclock as different functions. 

For example, the following showDay function sets the innerHTML property of the 
dat eNow element to the text string “11/8/2021<br />2:45:12 p.m.” 


function showDay() { 
document .getElementById("dateNow") .innerHTML = 
"11/8/2021<br />2:45:12 p.m."; 


} 


Note that there are no parameters for this function, which means it always writes the 
same HTML code into the dateNow element. However, you could store the date and 
time text strings as parameters named dateStr and timeStr as the following function 
demonstrates: 


function showDay(dateStr, timeStr) { 
document .getElementById("dateNow") .innerHTML = 
dateStr + "<br />" + timeStr; 


} 


Parameters are treated as variables within the function. By defining the parameter 
values elsewhere in the JavaScript file, you can run this function to write different 
HTML code into the dateNow element. 

Create a new function now named runClock() containing the code you have written 
to create and display the countdown clock. 
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To insert the runClock() function: 
BD 1. Return to the tny_script.js file in your editor. 
Dd 2. Directly below the initial comment section, insert the following comment: 


/* Function to create and run the countdown clock */ 


BD 3. Next, add the following code as the initial line of the runClock() function: 
function runClock() { 

BD 4. Scroll to the bottom of the file and insert a closing } to close the runClock() 
function. 

BD 5. Indent the code within the function to make it easier to read. 


Figure 9-36 shows the code and structure of the runClock() function. 


Figure 9-36 Complete runClock() function 


there are no parameters 
in this function 


opening { marks the start 
of the function commands 


/* Function to crepte and run the countdown clock */ 
GEE) Function runctock) ¢ 
var entDay = new Date(); 
var st t = currentDay. : te )* 
var t t = currentDay.t : i est © 
document. get ent i("dateNow"). = 
dateStr + b + timestr; 
var Yea = new Date("January 1, 28021"); 
var «ty = currentDay. th Y () + H 
function code is newYear.set! ear (nextYear); 
indented to make var ft = (newYear - currentDay) / " - " ) 
it easier to read 
var ft = (daysLeft - Math. f (daysLeft) )*24; 
var ft = (hrsteft - Math. f (hrsLeft))*60; 
vat ft = (minsLeft - Math.f (minsLeft) )* . 
closing } marks the document. gett entById("days").text tent = Math. (daysLeft) ; 
end of the function document. getE Lementt i("hrs"). text tent = Math. f (hrsLeft); 
commands document. cett ent Id("mins").text t t = Math.f (minsLeft) ; 
| document. cet entt ("secs") .text tent = Math. f (secsLeft); 


Next, you explore how to run a function within your program. 
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Calling a Function 


To run a function, you have to call it. If the function has any parameters, the initial 
values of the parameters are set when the function is called. The expression to call a 
function and run the commands it contains has the general form 


function _name(parameter values) 


where function_name is the name of the function and parameter values isa 
comma-separated list of values that match the parameters of the function. If no 
parameters are used with the function, leave the parameter values blank as follows: 


function name () 


For example, to call the showDay() function described earlier with the text string 
“11/8/2021” for the dateStr parameter and “2:45:12 p.m.” as the value of the 
timeStr parameter, you would run the following command: 


showDay ("11/8/2021", "2:45:12 p.m."); 
resulting in the following HTML code being written into the dateNow element: 
11/8/2021<br />2:45:12 p.m. 


Parameter values can also be variables. The following code calls the showDay() 
function using the values stored in the text1 and text2 variables: 


var text1="11/8/2021"; 
var text2="2:45:12 p.m."; 
showDay(textl, text2); 


resulting in the same code written to the innerHTML property of the dateNow element. 
One of the great advantages of functions is that they can be repeatedly called with 
different parameter values to achieve different results. Another advantage is that 
functions break long and complicated scripts into manageable chunks. It’s also good 
programming practice to include oft-used functions in a separate JavaScript file so that 
they can be accessed and used by multiple scripts throughout the website. 

Execute the runClock() function now by adding a line to call it. 


To call the runClock() function: 
DD 1. Directly above the runClock() function, insert the following command: 


/* Execute the function to run and display the countdown clock */ 
runClock () ; 


BD 2. Compare your code to Figure 9-37, which highlights the code to run the 
runClock() function. 


Calling the runClock() function 


an TS /* Execute the function to run and display the countdown clock */ 
& runClock() function runClock() 3 


and run the countdown cloct 


Function to create 


function runClock() { 


the current date and time */ 


BD 3. Save your changes to the file and then reload tny_clock.html in your browser. 
Verify that the page once again displays the current date and time and 
calculates the time interval until the New Year's Bash. 


INSIGHT 
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Creating a Function to Return a Value 


You created the runClock() function to perform the action of writing HTML code to 
elements on the countdown clock web page. The other use of a function is to return 
a calculated value. For a function to return a value, it must conclude with a return 
statement as follows 


function function _name (parameters) { 
commands 
return value; 


} 


where value is the calculated value that is returned by the function. For example, the 
following calcArea() function returns the area of a rectangle for a given length and width: 


function calcArea(length, width) { 
var rectArea = length*width; 
return rectArea; 


In this function, the value of the rectArea variable is returned by the function. The 
following code demonstrates how to call the calcArea() function for an 8x6 rectangle, 
storing the calculated area in the totalArea variable: 


War x. -= Bs 
var y = 6; 
var totalArea = calcArea(x,y) ; 


The first two commands assign the values 8 and 6 to the x and y variables, 
respectively. The values of both of these variables are then sent to the calcArea() 
function as the values of the length and width parameters. The calcArea() function uses 
these values to calculate the area, which is stored in the totalArea variable. 

Functions that return a value can be placed within larger expressions. For example, 
the following code calls the calcArea() function within an expression that multiplies the 
area value by 2 and store it as the variable z2: 


var z2 = calcArea(x,y) *2; 


You do not need to create a function that returns a value for Hector’s countdown 
clock page. 


Functions and Variable Scope 


As you have seen, the commands within a function are run only when the function 
is called. This has an impact on how variables within the function are treated. Every 
variable you create has a property known as scope, which indicates where you can 
reference the variable within the JavaScript file. A variable’s scope can be either local 
or global. A variable declared within a function has local scope and can be referenced 
only within that function. Variables with local scope are sometimes referred to as local 
variables. All of the variables you created in this session have local scope and can only 
be referenced from within the runClock() function. Function parameters also have local 
scope and are not recognized outside of the function in which they are used. 
Variables not declared within functions have global scope and can be referenced 
from anywhere within the script file or from within other script files. Variables with 
global scope are often referred to as global variables. 
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With timed-interval com- 
mands, the first execution 
of the command occurs 
after a delay equal to the 
size of the time interval. 


Running Timed Commands 


You have completed the functions required for the countdown clock, but the clock is 
largely static, changing only when the page is reloaded by the browser. Hector wants 
the clock to be updated constantly so that it always shows the current time and the 
time remaining until the New Year's Bash. To do this, you need to rerun the runClock() 
function at specified times. JavaScript provides two methods for doing this: time- 
delayed commands and timed-interval commands. 


Working with Time-Delayed Commands 


A time-delayed command is a JavaScript command that is run after a specified 
amount of time has passed. The time delay is defined using the following 
setTimeout () method 


setTimeout ("command", delay) ; 


where command is a JavaScript command and delay is the delay time in milliseconds 
before a browser runs the command. The command must be placed within either 
double or single quotation marks. For example, the following command sets a 
5-millisecond delay before a browser runs the runClock() function: 


setTimeout ("runClock()", 5); 


In some JavaScript programs, you may want to cancel a time-delayed command. 
This can be necessary when other user actions remove the need to run the command. 
Time-delayed commands are canceled using the following statement: 


clearTimeout () ; 


There is no limit to the number of time-delayed commands a browser can process. 
To distinguish one time-delayed command from another, you assign a unique 
identification to each command using the statement 


var timeID = setTimeout ("command", delay) ; 


where timeID is a variable that stores the ID of the time-delayed command. After 
you have assigned an ID to the command, you can cancel it using the following 
clearTimeout () method 


clearTimeout (timeID) ; 


where once again time1D is the variable that stores the ID of the command. 


Running Commands at Specified Intervals 


The other way to time JavaScript commands is by using a timed-interval command, 
which instructs browsers to run the same command repeatedly at a specified interval. 
Timed-interval commands are applied using the following set Interval () method 


setInterval ("command", interval); 


where interval is the interval in milliseconds before the command is run again. 
Timed-interval commands are halted using the following statement: 


clearInterval (); 


As with time-delayed commands, you may have several timed-interval commands 
running simultaneously. To distinguish one timed-interval command from another, you 
store the time ID in a variable as follows 


var timeID = setInterval ("command", interval); 


and halt the timed-interval command by applying the clearInterval() method with 
timeID as the parameter value: 


clearInterval (timeID) ; 
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An important point to remember about the set Timeout () and set Interval () 
methods is that after a browser processes a request to run a command at a later 
time, the browser doesn’t stop. Instead, the browser processes the next commands 
in the script without delay. For example, you might try to run three functions at 
50-millisecond intervals using the following structure: 


setTimeout ("function1l()", 50); 
setTimeout ("function2()", 50); 
setTimeout ("function3()", 50); 


However, a browser would execute this code by running all three functions almost 
simultaneously. To run the functions with a separation of about 50 milliseconds between 
one function and the next, you would need to use three different delay times, as follows: 


setTimeout ("functionl()", 50); 
setTimeout ("function2()", 100); 
setTimeout ("function3()", 150); 


In this case, a user’s browser would run the first function after 50 milliseconds, the 
second function 50 milliseconds after that, and the third function after another 
50 milliseconds have passed. 


REFERENCE 


Running Timed Commands 
e To run a command after a delay, use the method 
var timeID = setTimeout ("command", delay) 


where command is the command to be run, delay is the delay time in milliseconds, and 
timeIDis a variable that stores the ID associated with the time-delayed command. 
¢ To repeat a command at set intervals, use the method 


var timeID = setInterval("command", interval) 


where interval is the time, in milliseconds, between repetitions of the command. 
¢ To cancel a specific time-delayed command, use the method 


clearTimeout (timeID) 


where timeID is the ID of the time-delayed command. 
¢ To clear all time-delayed commands, use the following method: 


clearTimeout () 
¢ To cancel a repeated command, use the method 
clearInterval (timeID) 


where timeID is the ID of the repeated command. 
To clear all repeated commands, use the following method: 


clearInterval () 


Use the set Interval () method to repeatedly run the runClock() function. Because 
the function should run once every second, set the interval length to 1000 milliseconds 
using the command: 


setInterval ("runClock()", 1000); 


Add this command to the tny_script.js file now. 
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To run the runClock() function every second: 


BD 1. Return to the tny_script.js file in your editor and, directly below the 
runClock() command, insert the following: 


setInterval ("runClock()", 1000); 


Figure 9-38 highlights the code to run the timed-interval command. 


Figure 9-38 Repeating the runClock() function 


/* Execute the function to run and display the countdown clock 
runClock() 3 
setiInterval("runClock()", 1000); 


repeats the runClock() 
function every second 


BD 2. Save your changes to the file and then reload tny_clock.html in your browser. 


D 3. Verify that every second the time value and the countdown value change as 
the date of the New Year’s Eve Bash comes ever closer. 


You have completed the countdown clock for the New Year's Bash. Hector will continue 
to work on the event's website and get back to you with any new projects or concerns. 


Controlling How JavaScript Works with 
Numeric Values 


As you perform mathematical calculations using JavaScript, you will encounter 
situations in which you need to work with the properties of numeric values themselves. 
JavaScript provides several methods that allow you to examine the properties of 
numbers and specify how they are displayed on a web page. 


Handling Illegal Operations 


Some mathematical operations can return results that are not numeric values. For 
example, you cannot divide a number by a text string. An expression such as 5/"A" 
will return the value Nan, which stands for “Not A Number” and is JavaScript’s way of 
indicating an illegal operation that should involve only numeric values, but doesn’t. You 
can check for the presence of this particular error using the following isNan() function 


isNaN (value) 


where value is the value or variable you want to test for being numeric. The isNaN () 
function returns a Boolean value of true if the value is not numeric and false 
otherwise. The use of the isNan() function is one way to locate illegal operations in 
code in which non-numeric values are treated as numeric. 

Another illegal operation is dividing a number by 0, which returns a value of 
Infinity, indicating a numeric calculation whose result is greater than the largest 
numeric value supported by JavaScript. An Infinity value is also generated for an 
operation whose result is less than the smallest numeric value. JavaScript is limited 
to numeric values that fall between approximately 1.8 x 10308 and 1.8 x 10308. Any 
operation that exceeds those bounds, such as attempting to divide a number by 0, 
causes JavaScript to assign a value of Infinity to the result. You can check for this 
outcome using the function 


isFinite (value) 
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where value is the value you want to test for being finite. Like the iswan() function, 
Aphostainahateepotea the isFinite () function returns a Boolean value of true if the value is a finite number 
run-time or logical error falling within JavaScript’s acceptable range and false if the numeric value falls outside 


may have a mismatched that range or if the value is not a number at all. 
data value; you can use 
the isFinite() and 


isNaN() functions to Defining a Number Format 
determine the state of . : . : : 
your data values. When JavaScript displays a numeric value, it stores that value to 16 decimal places of 


accuracy. This can result in long numeric strings of digits being displayed by browsers. 
For example, a value such as 1/3 is stored as 0.3333333333333333. 

It is rare that will you need to display a calculated value to 16 decimal places. 
To control the number of digits displayed by browsers, you can apply the following 
toFixed() method 


value.toFixed (n) 


where value is the value or variable and n is the number of decimal places that should 
be displayed in the output. The following examples show the toFixed() method 
applied to different numeric values: 


var testValue = 2.835; 
testValue.toFixed(0) // returns "3" 
testValue.toFixed(1) // returns "2.8" 
testValue.toFixed(2) // returns "2.84" 


Note that the toFixed() method limits the number of decimals displayed by a value 
and converts the value into a text string. Also, the toFixed() method rounds the last 
digit in an expression rather than truncating it. 


Converting Between Numbers and Text 


Sometimes, you might need to convert a number to a text string and vice versa. One way 
to convert a number to a text string is by using the + operator to add a text string to a 
number. For example, the following code uses the + operator to concatenate a numeric 
value with an empty text string. The result is a text string containing the characters 123. 


testNumber = 123; // numeric value 
testString = testNumber + ""; // text string 


To convert a text string to a number, you can apply an arithmetic operator (other 
than the + operator) to the text string. The following code takes the text string 123 and 
multiplies it by 1. JavaScript converts the text string “123” to the numeric value 123. 


testString = "123"; // text string 
testNumber = testString*1; // numeric value 


Another way of converting a text string to a numeric value is to use the following 
parseInt () function, which extracts the leading integer value from a text string 


parselInt (text) 


where text is the text string or variable from which you want to extract the leading 
integer value. The parseInt () function returns the integer value from the text string, 
discarding any non-integer characters. If a text string does not begin with an integer, 
the function returns the value NaN, indicating that the text string contains no accessible 
number. The following are some sample values returned by the parseInt () function: 


parseInt ("120 lbs") ; // returns 120 
oe ee parseInt ("120.88 lbs"); // returns 120 
parselInt ("weight equals 120 lbs"); // returns NaN 


parseFloat () function 
to extract decimal values 


Figure 9-39 summarizes the different JavaScript functions and methods used to work 
from text strings. 


with numeric values. 
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Figure 9-39 Numerical functions and methods 


Numerical Function Description 

isFinite (value) Indicates whether value is finite and a real number 

isNaN (value) Indicates whether value is a number 

parseFloat (string) Extracts the first numeric value from the text string 

parseInt (string) Extracts the first integer value from the text string 

Numerical Method Description 

value.toExponential (n) Returns a text string displaying value in exponential 
notation with n digits to the right of the decimal point 

value.toFixed (n) Returns a text string displaying value to n decimal 
places 

value.toPrecision(n) Returns a text string displaying value to n significant 


digits either to the left or to the right of the decimal point 


You don’t need to use the parseInt () or other numeric functions in your code. At 


this point, you can close any open files or applications. 


PROSKILLS % 


Problem Solving: Fixing Common Programming Mistakes 


When you begin writing JavaScript programs, you will invariably encounter mistakes in 
your code. Some common sources of programming errors include: 


¢ Misspelling a variable name: For example, if you named a variable ListPrice, then 


misspellings or incorrect capitalization—such as listprice, ListPrice, or 
list_price—will result in the program failing to run correctly. 


¢ Mismatched parentheses or braces: The following code results in an error because 


the function lacks the closing brace: 


function Area(width, height) { 
var size = width*height; 


¢ Mismatched quotes: |f you neglect the closing quotes around a text string, 


JavaScript treats the text string as an object or variable, resulting in an error. The 
following code results in an error because the closing double quote is missing from 
the firstName variable: 


var firstName = "Sean"; 
var lastName = "Lee"; 


e Missing quotes: When you combine several text strings using the + symbol, you 


might neglect to quote all text strings. For example, the following code generates 
an error because of the missing quotes around the <br /> tag: 


document .write("MidWest Student Union" + <br />); 


As you become more experienced, you will be able to quickly spot these types of 
errors, making it easier for you to debug your programs. 
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REVIEW 


Session 9.3 Quick Check 


1. The command to increase the value of the thisDay variable by 1, using the 
increment operator is: 
a. thisDay+ 
b. thisDay++ 
c. incr (thisDay) 
d. increment (thisDay) 

2. Rewrite the following command using an assignment operator: income = 
income -— taxes; 


a. income = - taxes 
b. income -- taxes 
c. income -= taxes 


d. income/taxes - 

3. Which expression returns the value of dailylncome, rounded up to the next 

highest integer? 

a. Math. round (dailyIncome) 

b. Math. int (dailyIncome) 

c. Math. roundup (dailyIncome) 
d. Math. ceil (dailyIncome) 

4. The area of a circle is mr? where r is the circle’s radius. Which JavaScript 
expression returns a circle’s area where the radius has been stored in a vari- 
able named radius? 

a. PI() *radius**2 

b. PI*radius**2 

c. Math.PI*Math.pow(radius, 2) 
d. Math. PI*radius*2 

5. Which command calls the calcCirArea() function using a value of 15 for the 
circle’s radius and storing the result in a variable named finalArea? 
a. finalArea = calCirArea 15; 

b. finalArea = calCirArea(radius = 15); 
c. finalArea radius.calCirArea () ; 
d. finalArea = calcCirArea(15); 


ll 


ll 


6. Variables that can be referenced only within the function in which they are 
created have: 
a. function scope 
b. global scope 
c. local scope 
d. nested scope 
7. Which command runs the init() function after a 5-second delay? 


a. setDelay("init()", 5000); 
b. setDelay("init()", 5); 
c. setTimeout ("init()", 5000); 
d. setTime("init()", 5); 
8. Which command runs the init() function once every 5 seconds? 
a. setInterval ("init()", 5); 
b. setInterval ("init()", 5000); 
c. repeat ("init()", 5); 
d. repeatFunction("init()", 5000); 
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Coding Challenge 1 


Data files needed for this Coding Challenge: code9-1_txt.html, clock9-1_txt.js, code9-1_styles.css, 
segment14.ttf, segment14.woff 


You are working on a JavaScript clock that will show the date, day of the week, and time. The clock 
will update every second. Figure 9-40 shows a preview of the completed page. 


Figure 9-40 Coding Challenge 9-1 example page 


Current Date and Time 


Do the following: 


1. Open the code9-1_txt.html and clock9-1_txt.js files from the html09 » code folder. Enter 
your name and the date in each document and save the files as code9-1.html and clock9-1.js 
respectively. 


2. Go to the code9-1.html file in your editor. Within the head section insert a script element 
connecting the page to the clock9-1.js file. Add the defer attribute to the script element to 
defer the loading of the script until after the page contents load. 

3. Study the contents of the file and then save your changes. 

4. Go to the clock9-1.js file in your editor. Directly below the initial comment section, insert the 
runClock() function. Within the function do the following: 


a. 
b. 


Declare the thisDay variable containing the current date using the new Date () command. 


Create the thisDate variable containing the text string of the current date by applying the 
toLocaleDateString() method to the thisDay variable. 


. Create the thisDayNum variable to store the number of the current weekday by applying the 


getDay() method to the thisDay variable. 


. Create the thisWeekday variable by storing the value returned by the getWeekday() function 


using thisDayNum as the function value. 


. Create the thisTime variable containing the text string of the current date by applying the 


toLocaleTimeString() method to the thisDay variable. 


Using the textContent property, change the text stored in the document element with the 
ID "date" to the value of the thisDate variable, the text stored in the document with element 
with "wday" ID to the value of the thisWeekday variable, and the text stored in the document 
element with the ID "time" to the value of the thisTime variable. 
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5. Directly before the runClock() function insert a statement to run the runClock() function and then 
another statement that uses the set Interval () method to run the runClock() function every 
second. 

6. Save your changes to the file and then open the code9-1.html file in your browser. Verify that the 


page shows the current date, weekday, and time, and that the clock automatically updates every 
second. 


7. Submit the completed file to your instructor. 


Coding Challenge 2 


Data Files needed for this Coding Challenge: code9-2_txt.html, countdown9-2_txt.js, 
code9-2_styles.css, , segment14.ttf, segment14.woff 


CODE 


Figure 9-41 shows a preview of a page containing a countdown clock that counts down from 10 
seconds to zero. When zero is reached, the page will show the message "Time's Up". 


Clock Countdown Clock Countdown 


oo 
mi | 


Rit 


Do the following: 


1. Open the code9-2_txt.html and countdown9-2_txt.js files from the html09 > code2 folder. 
Enter your name and the date in each document and save the files as code9-2.html and 
countdown9-2.js respectively. 


2. Go to the code9-2.html file in your editor. Within the head section insert a script element 
connecting the page to the countdown9-2.js file. Add the defer attribute to the script ele- 
ment. Save your changes to the file. 


3. Go to the countdown9-2.js file in your editor. Directly below the initial comment section, 
declare the secsLeft variable, setting its initial value to 10. 
4. Create the countdown() function. Within the function add the following: 


a. Declare the secsString variable by calling the addLeadingZero() function using the secsLeft 
variable as the function value. The addLeadingZero() function is used to add leading zeroes to 
numeric values from 0 to 9. 

b. Change the text content of the document element with the ID "seconds" to the value of the 
secsString variable. 

c. Run the checkCountdown() function to determine whether the end of the countdown has 
been reached. 


d. Use the decrement operator to reduce the value of the secsLeft variable by 1. 
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5. Create the stopCountdown() function to the stop the countdown when 0 is reached. Add the fol- 
lowing commands to the function: 

a. Change the text content of the document with the ID "Alert" to the text string "Time’s Up". 
b. Use the clearInterval () method to the clear the repeating command with the timelD 
variable clockID. 

6. Go back to the top of the file and directly after the command to declare the secsLeft variable, 
insert a command using the set Interval () method to run the countdown() function every 
second. Store the time ID associated with the repeating command in the clockID variable. 

7. Save your changes to the file and then open the code9-2.html file in your browser. Verify that the 
page shows a countdown from 10 down to 0 seconds and when 0 seconds is reached, the page 
shows the message "Time’s Up". 

8. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code9-3_txt.html, clockface9-3_txt.js, 
code9-3_styles.css, clockface.png, hours.png, minutes.png, seconds.png 


CODE 


Figure 9-42 shows a preview of a page containing an analog clock with moving second, minute, 
and hour hands. 


Coding Challenge 9-3 example page 


Analogsliocgk 


Do the following: 


1. Open the code9-3_txt.html and clockface9-3_txt.js files from the html09 » code3 folder. Enter 
your name and the date in each document and save the files as code9-3.html and clockface9-3.js 
respectively. 


2. Go to the code9-3.html file in your editor. Within the head section insert a script element connect- 
ing the page to the clockface9-3.js file. Add the defer attribute to the script element. Save your 
changes to the file. 


3. Go to the clockface9-3.js file in your editor. Below the initial comment section insert the moveHands() 
function that moves the three hands of the analog clock. Add the following to the function: 


a. Create a variable named nowTime that contains the current date and time. 

b. Create the nowSeconds, nowMinutes, and nowHours variables containing the seconds, minutes, 
and hours values from the nowTime variable. 

c. Calculate the angle that the second hand makes on the clock face by multiplying the nowSeconds 
value by 6. Store the result in the secondsAngle variable. 
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d. Determine the angle that the minute hand makes on the clock face by calculating the 
following expression: 


(nowMinutes + nowSeconds/60) *6 


Store the calculated value in the minutesAngle variable. 
e. Determine the angle that the hour hand makes on the clock face by calculating the following 
expression: 


(nowHours + nowSeconds/3600 + nowMinutes/60) *30 


Store the calculated value in the hoursAngle variable. 

f. Call the rotateHand() function using secondsAngle and "seconds" as the argument value 
to rotate the image of the second hand. Call the rotateHand() function again using the 
minutesAngle and "minutes" as the argument values. Call the rotateHand() function one last 
time using the hoursAngle and "hours" as the argument values. 


4. Directly below the moveHands() function insert a command to run the moveHands() function 
and then use the set Interval () method to run the moveHands() method every second. 


5. Save your changes to the file and then open the code9-3.html file in your browser. Verify that 
the page shows an analog clock face with the current time and that the hands of the clock move 
as the time changes. 


6. Submit the completed file to your instructor. 


Coding Challenge 4 


. Data Files needed for this Coding Challenge: code9-4_txt.html, debug9-4_txt.js, code9-4_styles.css, 
os slide1.jpg - slide14.jpg 
lu 
QA 


You can use JavaScript to display a random gallery of images. A page of a random gallery of images 
of the International Space Station has been created for you, but there are errors in the code. Locate 
and fix the errors to display the gallery. One of the images with its caption is shown in Figure 9-43. 


Figure 9-43 J 9-43 Coding Challenge 9-4 example page 


International Space Station Images 


a - rm cad 
Intemational Space Sialionm over Barn] 2002) 
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Do the following: 


1. Open the code9-4_txt.html and debug9-4_txt.js files from the html09 > code4 folder. Enter your 
name and the date in each document and save the files as code9-4.html and code9-4_debug.js 
respectively. 


2. Go to the code9-4.html file in your editor. There is a mistake in the script element in that 
the external JavaScript will be opened and run before the page is completely loaded. Fix the 
script element so that it loads the script file only once the page is loaded. 


3. Save your changes and go to the debug9-4.js file in your editor. 


4. The slide images should update every 5 seconds. Fix the parameter values for the 
setInterval() method so that the showlmage() function is run every 5 seconds. 


5. There are several mistakes in the code in which items that should be quoted are not. Locate and 
fix those errors. 


6. Use of uppercase and lowercase letters is another source of error. Find and fix all situations in 
which variable names or JavaScript commands are written with improper case. 


7. Save your changes to the file. 


8. Open the code9-4.html file in your browser. When the page is free of errors, you should see a 
random image every 5 seconds. If the page is not working, you can use the Developer tools in 
your browser to locate any errors remaining in the code. 


9. Submit the completed file to your instructor. 


Review Assignments 


Data Files needed for the Review Assignments: tny_july_txt.html, tny_timer_txt.js, 2 CSS files, 
1 PNG file, 1 TTF file, 1 WOFF file 


Hector wants you to create a countdown clock page for the Tulsa Summer Party held on July 4th of 
every year. He wants the page to show the current date and time and to include a timer that counts 
down to the start of the fireworks at 9 p.m. on the 4th. Hector has already completed the page 
content and needs you to write the JavaScript code. A preview of the completed page for a sample 
date and time is shown in Figure 9-44. 


PRACTICE 
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Figure 9-44 Tulsa Summer Party 


Live music starts at 11 a.m. and 
continues through the day with 
special appearances from Fa/staf? 
Ergo, Crop Circles, Prairie Wind and 
James Po. 


45 regs A EE 


BAYS RAINS srs SK and 10K Run 


Famers Market 


Celebrate the nation's birthday at 


Tulsa's Summer Party, a day-long 
extravaganza in downtown Tulsa on 
the 4th of July. The festivities start 
at 9 a.m. with a 5K and 10K walk or 
race. A great event for the whole 
family. Sign up 8s an individual or 
part of 6 team 


The Farmer's Market \s also back 
with farm-fresh produce, meats, and 
dairy, There's something for every 
palate. 


At 9 p.m. enjoy the fireworks that 
have won awards as the best in the 
Midwest, designed and presented by 
Wizard Works. Arrive early for the 
best seats! 


After the show, dance the night 
away to the music of the 
Chromotones 


See you on the 4th! 


witarc works 
Feisteff Ergo 
Crop Circies 
James Po 
Tulsa Fireworks 


Praitie Wind 


© jbdphotography/Shutterstock.com; © Aija Lehtonen/Shutterstock.com; Source: www.1001fonts.com 


Complete the following: 


ile 


Use your editor to open the tny_july_txt.html and tny_timer_txt.js files from the html09 » review 
folder. Enter your name and the date in the comment section of each file, and save them as 
tny_july.html and tny_timer.js respectively. 


. Go to the tny_july.html file in your editor. Directly above the closing </head> tag, insert a 


script element that links to the tny_timer.js file. Defer the loading of the script file until the web 
page loads. 


. Take some time to study the content and structure of the file, paying close attention to the id 


attributes applied to different page elements. Save your changes to the document. 


. Go to the tny_timer.js file in your editor. At the top of the file, insert a statement to tell the 


browser to apply strict usage of the JavaScript code in the file. 


. Directly above the nextJuly4() function, insert a function named showClock() that has no 


parameters. Within the showClock() function, complete Steps a through g. 

a. Declare a variable named thisDay that stores a Date object containing the date May 19, 2021 
ait SEs eA/ alii 

b. Declare a variable named localDate that contains the text of the date from the thisDay 
variable using local conventions. Declare another variable named localTime that contains the 
text of the time stored in the thisDay variable using local conventions. 
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c. Within the inner HTML of the page element with the ID currentTime, write the following 
code 
<span>date</span><span>time</span> 
where date and time are the values of the localDate and localTime variables. 

d. Hector has supplied you with a function named nextJuly4() that returns the date of the next 
4th of July. Call the nextJuly4() function using thisDay as the parameter value and store the 
date returned by the function in the j4Date variable. 

e. The countdown clock should count down to 9 p.m. on the 4th of July. Apply the setHours () 
method to the j4Date variable to change the hours value to 9 p.m. (Hint: Express the value for 
9 p.m. in 24-hour time.) 

f. Create variables named days, hrs, mins, and secs containing the days, hours, minutes, and 
seconds until 9 p.m. on the next 4th of July. (Hint: Use the code from the tny_script.js file in 
the tutorial case as a guide for calculating these variable values.) 

g. Change the text content of the elements with the IDs "dLeft", "hLeft', "mLeft", and "sLeft" to the 
values of the days, hrs, mins, and secs variables rounded down to the next lowest integer. 

6. Directly after the opening comment section in the file, insert a command to call the showClock() 
function. 

7. After the command that calls the showClock() function, insert a command that runs the 
showClock() function every second. 

8. Document your work in this script file with comments. 

9. Save your changes to the file and then open the tny_july.html file in your browser. Verify that the 
page shows the date and time of May 19, 2021 at 9:31:27 a.m., and that the countdown clock 
shows that Summer Party fireworks will begin in 46 days, 11 hours, 28 minutes, and 33 seconds. 
The countdown clock will not change because the script uses a fixed date and time for the 
thisDay variable. 

10. Return to the tny_timer.js file in your editor. Change the statement that declares the thisDay 
variable so that it contains the current date and time rather than a specific date and time. 


11. Save your changes to the file and then reload the tny_july.html file in your browser. Verify that 
the countdown clock changes every second as it counts down the time until the start of the 
fireworks at 9 p.m. on the 4th of July. 


Case Problem 1 


Data Files needed for this Case Problem: bc_union_txt.html, bc_today_txt.css, 2 CSS files, 
4 PNG files 


Bridger College Student Union Sean Baris manages the website for the student union at Bridger 
College in Bozeman, Montana. The student union provides daily activities for the students on 
campus. As website manager, part of Sean’s job is to keep the site up to date on the latest activities 
sponsored by the union. At the beginning of each week, he revises a set of seven web pages detailing 
the events for each day in the upcoming week. 


Sean would like the website to display the current day's schedule within an aside element. To do 
this, the page must determine the day of the week and then load the appropriate HTML code into 
the element. He would also like the Today at the Union page to display the current day and date. 
Figure 9-45 shows a preview of the page he wants you to create. 
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Figure 9-45 Daily events at the Bridger College Student Union 


dger “ Student 8 


Pe od 


The Bridger College Student Union sits at the geographic and social center of the Bridger Today at the Union 
College campus. Here at the Union we provide space for students and members of the 10/12/2021 
acadmic community to study, socialize, eat, host events, attend meetings. and engage in 


. ue bf 
campus ire Alternative Breaks Spring Break 


Information Session 
Our facility provides @ home to many exciting universRy groups, access to key student 


services, and collaborative spaces for students to connect on campus. In addition, the 
Union offers over 21,000 square feet of meeting and event space, with the ability to host ; 
Various CAMPUS events, seminars, conferences, banquets, and other functions. , 


Here at the Student Union we are always learning and growing, delivering new services 
that add value to your college experience. Our friendly staff is eager to engage with you ea Travel, 5 
in developing new programs to meet your needs 


Location: eat He 


Upcoming Time: 9 arr 


Costs fre 
Coming Next Week!t Join your fellow students for a week of 
trivia competition! Prizes are awarded to the top three teams Spotlight Series 
8nd the last place team. All participants are eligible for door eecitedie' shusmeiainn 
prizes. To participate, please remember to bring your student 
of college 1D, Check-in begins at 5:30 p.m. with the first 


Question promptly at 6:00 p.m. 

All teams must register for each quiz night. Please include Location: § 
roster and team name with registration (teams may include up Time: 7 
te 20% non-student guests). Due to overwhelming popularity, Casts fre 


registrations the day of the quiz may not be available. The 
registration period for a quiz night begins at the conclusion of 
the previous quiz night. 


Please send registration information to quizbc#example.com 


f facebook 
© twater 


tiridige: \ obepe 


BC Departments 


© Rawpixel.com/Shutterstock; Sources: openclipart.org; Source: Facebook; Source: Twitter, Inc. 


Complete the following: 


1. Use your editor to open the bc_union_txt.html and bc_today_txt.js files from the html09 » case 
folder. Enter your name and the date in the comment section of each file, and save them as 
bc_union.html and bc_today.js respectively. 


2. Go to the bc_union.html file in your editor. Directly above the closing </head> tag, insert a 
script element that links the page to the bc_today.js file. Defer the loading of the script until 
after the rest of the page is loaded by the browser. 


3. Study the contents of the file and then save your changes. 


4. Go to the bc_today.js file in your editor. At the top of the file, insert a statement indicating that 
the code will be handled by the browser assuming strict usage. 


Note that within the file is the getEvent() function, which returns the HTML code for the daily 
events at the union given a day number ranging from O (Sunday) to 6 (Saturday). 


5. Declare the thisDate variable containing the Date object for the date October 12, 2021. 


6. Declare the dateString variable containing the text of the thisDate variable using local 
conventions. 


7. Declare the dateHTML variable containing the following text string 
<h2>date</h2> 
where date is the value of the dateString variable. 
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8. Create the thisDay variable containing the day of the week number from the thisDate variable. 
(Hint: Use the getDay () method.) 

9. Using the thisDay variable as the parameter value, call the getEvent() function to get the HTML 
code of that day’s events and store that value in a variable named eventHTML. 

10. Applying the insertAdjacentHTML () method to the page element with the ID unionToday, 
insert the value of the dateHTML plus the eventHTML variables before the end of the element 
contents. 

11. Document your code with descriptive comments. 

12. Save your changes to the file and then load bc_union.html in your browser. Verify that the sidebar 
shows both the date “10/12/2021” formatted as an h2 heading and the daily events for that date 
formatted as a description list. Your content should resemble that shown in Figure 9-45. 

13. Return to the be_today.js file and test your code by changing the date in the thisDate variable 
from 10/13/2021 up to 10/19/2021. Verify that a different set of events is listed for each date 
when you refresh the page in your browser. 

14. Return to the be_today.js file and change the value of the thisDate variable so that it uses the 
current date and time. 

15. Reload the bc_union.html file in your browser to show the date and the events for the current 
day of the week. 


CHALLENGE 


Case Problem 2 


Data Files needed for this Case Problem: ja_vynes_txt.html, ja_quote_txt.js, 2 CSS files, 
4 PNG files, 1 TTF file, 1 WOFF file 


Austen Vynes_ Emelia Dawes shares her passion for the works of Jane Austen by managing a website 
named Austen Vynes dedicated to the writer and her works. Emelia is revising the layout and design 
of her website and would like your assistance in redesigning the front page. She wants the front page 
to display a random Jane Austen quote every time the page is loaded by the browser. Emelia asks you 
to write a JavaScript program to supply a randomly selected quote. A preview of the page is shown in 
Figure 9-46. 
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Figure 9-46 Random quote on the Austen Vynes page 


Jane Austen, born on December 16, 1775, ts widely 
considered one of England's foremost novelists. Austen ftved 
& quiet life, though her brothers who were officers in the 
Roya! Navy were instrumental in introducing her to the 
wider world through their travels and service. Austen's role 
in the privileged life of the landed gentry is reflected in ail 
her fiction. 


In her Chuidhood, Austen began writing comic stories called 
The Juvenilia. Her first mature work was the novella Lady 
Susan, written at the age of 19, Austen’s most famous 
novels were written in her twenties, starting with Sense and 
Sensibility followed by Northanger Abbey, which was not 
published until after her death. 


Rand Prejudice. £ 2 
and Mansficid Park were written in her thirties. Her fina! 
novel, f Was Completed shortly before her Geath 


at the age of 42 


Other classic novels inciuding Pride 


Though the volume of her work does not compare with 

other famous English novelists such as Charies Dickens, her 

novels consistently rate high on the list of popular English 

novels. With severs! successful screen adaptions, Austen's popularity hss only grown as modern audiences 
embrace the humor and intelligence of her main characters and her insight into the human condition 


Jane Austen died on July 16, 1817 


Sources: openclipart.org; Patrick Carey; British National Archives; A Memoir of Jane Austen by her nephew J. E. Austen-Leigh, 
Vicar of Bray, Berks. London: Richard Bentley, New Burlington Street, Publisher in Ordinary to her Majesty, 1870 


Complete the following: 


1. Use your editor to open the ja_vynes_txt.html and ja_quote_txt.js files from the html09 » case2 
folder. Enter your name and the date in the comment section of each file, and save them as 
ja_vynes.html and ja_quote.js respectively. 

2. Go to the ja_vynes.html file in your editor. Directly above the closing </head> tag, insert a 
script element that links the page to the ja_quote.js file. Defer the loading of the script file 
until the rest of the page is loaded by the browser. 

3. Study the contents of the file and then save your changes. 

4. Go to the ja_quote.js file in your editor. At the top of the file, insert a statement indicating that 
the code will be handled by the browser assuming strict usage. 

€S Explore 5. Directly below the comment section, insert a function named randomInt that will be 
used to generate a random integer. Specify two parameters for the function named lowest and 
size. The lowest parameter will specify the lowest possible value for the random integer and the 
size parameter will set the number of integers to be generated. Use those two parameter values 
and the Math. floor() and Math. random() methods to return a random integer within the 
specified range. 
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6. Above the randomInt() function insert a command to call the function, generating a random 
integer from 0 to 9. (Hint: Remember that the size of this interval is 10 because it includes O in 
its range.) Store the result from the function in the randomQ variable. 

af. Explore 7. Create a variable named quoteElem that references the first element in the document 
that has the quote tag name. 

8. Call the getQuote() function using the randomQ variable as the parameter value to generate 
a random Jane Austen quote. Display the text of the quote as the inner HTML code of the 
quoteElem variable. 

9. Add appropriate comments to your code to document your work. 

10. Save your changes to the file and then open the ja_vynes.html file in your browser. Verify that a 
random Jane Austen quote appears at the top of the page. 

11. Reload the page several times and verify that with each reloading, a different Austen quote 
appears on the page. 
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° Create an array 

¢ Work with array properties and 
methods 


Session 10.2 

* Create a program loop 

¢ Work with the for loop 

¢ Write comparison and logical 
operators 
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e Create a conditional statement 
e Use the if statement 
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Case | The Lyman Hall Theater 


With first-class concerts, performances from Broadway touring 
companies, and shows from famous comics, singers, and other 
entertainers, the Lyman Hall Theater is a popular attraction in 
Brookhaven, Georgia. Lewis Kern is the center’s events manager 
tasked with the job of updating the theater’s website. 


Lewis wants your help with developing an event calendar application. 
Rather than constructing the calendar manually, he wants you to write 
a JavaScript program to automatically generate a web table for a given 
calendar month, listing the events occurring at the theater during that 
month. The application should be flexible enough to work with any 
month so that Lewis only has to enter the event list each month. He 
wants you to develop a prototype for the September calendar. 


lht_sept_txt.html 
Iht_calendar_txt.js 
+ 6 files 


code10-2_txt.html 
list] 0-2_txt.js 
+1 file 


tc_cart_txt.html 
tc_cart_txt.js 
tc_order_txt.js 
+ 10 files 


|ht_events_txt.html 
Iht_table_txt.js 
+ 6 files 


code10-3_txt.html 
days10-3_txt.js 
+ 8 files 


vw_election_txt.html 


vw_results_txt.js 
+ 4 files 


code10-1_txt.html 
gallery10-1_txt.js 
+ 15 files 


code4 


code10-4_txt.html 
debug10-4_txt.js 
+1 file 
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Session 10.1 Visual Overview: 


var t = new Date("September 24, 2021"); 
document. get t ("calendar"). ert = createCalendar(thisDay) ; 
The createCalendar() 
function writes the ¢ 4 - ( yf 
d felis une on - 
ee SEh val fart = “<table id='calendar_table'>"; The calCaption() 
calendar tebe calendarHTML += calCaption(calDate); function writes the 
calendarHTML += "</table>"; calendar caption. 


return calendarHTML; 


function t ( ) 


3 5 ) = ("Januar » “February”, far » AS 7; 
An array is a collection aaa aw Tae i. we we a oe e 
: May", re", uly", "August", “September”, 
of values organized “on oe —s 
+ ctober’, Yovembe . lecembe 35 
under a single name. 
var t = calDate. th); 
val = calDate. Year(); 
return "<caption>” + monthName[thisHonth] + " " + thikVear + "</captior 


Values within an array are referenced 
using the format 


Arrays can be created using the object 
constructor 


array[i] var arrayName = new Array(values); 


where array is the array name and i is 
the index number of the value within 
the array. 


or using an array literal 


var arrayName = [values]; 
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Creating and Using Arrays 


Lyman Hall T 


home events box office facilities directions contact 


September at the Lyman Hall Theater 


Broadway starts out a great autumn at Prologue based on the writings of George atest developments in cognitive research 
the LHT with seven performances of Orwe! with Hacking your Dreams and David Wu 
Hamilton, starring Tre Dawes. These Giscusses Quantum entanglement in What 
performances are sure to seil out, $0 The young will enjoy Have Spacesuit. W Einstein Got Wrong 
order your seats today Travel = & Sage production using more 

than 500 images to create a living graphic Join us on Sunday for Classics Brunch with 
We're not done with Broadway yet, as novel of Robert A. Heinlein's classic music provided by the Carson Quartet 
popular singer Toni Trindle provides a science fiction story. Seating is limited, so please reserve your 
great evening of jazz standards in table for this popular series 
Stardust Memories and Ted Gilkam School's in session with our continuing 
presents his one-man show, Ihe Future ts ecture series. Mary Dees presents the 


September 2021 


1 

The Lyman Hell Theater Boa Ofhoe Staft 

414 Leeward Ovwe Group Rates Empoyment into 
Brookhaven, GA 


t vents Owechons & Parioeg 


© Nejron Photo/Shutterstock.com 


The code written to the web page is: 


<table id='calendar _ table'> 
<caption>September 2021</caption> 
</table> 
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Introducing the Monthly Calendar 


You and Lewis meet to discuss his idea for a monthly events calendar. He wants the 
calendar to appear in the form of a web table with links to specific events placed 
within the table cells. The appearance and placement of the calendar will be set using 
a CSS style sheet. Figure 10-1 shows a preview of the monthly calendar you will create 
for the Lyman Hall Theater website. 


Figure 10-1 Monthly events calendar 


monthly events 
calendar generated 
using JavaScript 


September at the Lyman Hall Theater 


Broadway starts cut 8 great autumn at La jue based on the writings of George atest developments in cognitive research 
the LHT with seven performances of Orwell wath Hack your Dreams and David Wu 
f, Starring Tre Dawes. These discusses Quantum entanglement in What 
performances are sure to sell out, 0 The young will enjoy Have Spacesiat W Einstein Got Wro 
order your seats today Taye! - & stage procuction using more 
than SOO images to create a living graptic §=—- Soin us on Sunday for Classics 8 
we're not done with Broadway yet, as novel of Robert A. Heinlein's classic Music provided by the Carson 0 
popular singer Toni Trindle provides a scence fiction story. Seating is limited, so please resery 
great evening of jarz standards in table for this popular series 
Starduet Memoree snd Fed Gilliam School's in session with our continuing 
presents his one-man show, Ihe Future is  ‘@cture series. Mary Dees presents the 
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The program you create should be easily adaptable so that it can be used to create 
other monthly calendars. Lewis wants the code that generates the calendar placed in the 
lht_calendar.js file. The events listed in the calendar will be placed in the Iht_events.js 
file. Finally, the styles for the calendar will be placed in the Iht_calendar.css style sheet 
file. Lewis already has created the styles required for the calendar table, but he has 
left the JavaScript coding to you. You will start by adding links to the Iht_calendar.js 
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and lht_calendar.css files to a web page describing the September events at the Lyman 
Hall Theater. You will work with the Iht_events.js file later in this tutorial. 


To access the September Events web page: 


D 1. Use your editor to open the Iht_sept_txt.html and Iht_calendar_txt.js 
files from the html10 > tutorial folder. Enter your name and the date in 
the comment section of each file and save them as Iht_sept.html and 
Iht_calendar.js respectively. 


BD 2. Return to the Iht_sept.html file in your editor, and then add the following code 
above the closing </head> tag to create links to both the calendar style sheet 
and the JavaScript file that will generate the HTML code for the calendar: 


<link href="lht calendar.css" rel="stylesheet"/> 
<script src="lht calendar.js" defer></script> 


Figure 10-2 highlights the revised code in the document head. 


Linking to the style sheet and JavaScript file 


style sheet for the 
calendar table 


<title>Lyman Hall Theater in September</title> 
<link href="Lht_base.css" rel="stylesheet" /> 
<Link href="Lht_layout.css" rel="stylesheet" /> 
<link href="Lht_calendar.css" rel="stylesheet" /> 
JavaScript file that jh a src="lLht_calendar.js" defer></script> 
</head> 


will generate the 


HTML code for 
the calendar table 


The calendar will be placed within a div element with the ID calendar. 


BD 3. Scroll down the file and, and, directly below the closing </article> tag, 
insert the following div element: 


<div id="calendar"></div> 


Figure 10-3 highlights the location where the calendar will be placed. 


Figure 10-3 Location of the calendar table 


HTML code for the 
calendar table will be 
placed within this div 
element 


articte 
<div id="calendar"></div> 


BD 4. Save your changes to the file. 


Reviewing the Calendar Structure 


The calendar you create will be constructed as a web table. Before you start writing the 
code to create this table, you should understand the table’s structure. Lewis wants the 
following class names and IDs assigned to the different parts of the table: 


e The entire calendar is set in a web table with the ID calendar_table. 
¢ The cell containing the calendar title has the ID calendar_head. 
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e The seven cells containing the days of the week abbreviations all belong to the class 
calendar_weekdays. 

¢ The cells containing the dates of the month all belong to the class calendar_dates. 

e The cell containing the current date has the ID calendar_today. 


These class and ID designations make it easier for page developers to assign 
different styles to the different parts of the calendar. If developers want to change the 
table’s appearance, they will not have to edit the JavaScript code to do so; instead, they 
only will have to modify the style sheet. 


Adding the calendar() Function 


You will place the commands that generate the calendar within a single function 
named createCalendar(). The initial code to generate the calendar follows: 


var thisDay = new Date("September 24, 2021"); 
document .getElementById("calendar") .innerHTML = 
createCalendar (thisDay) ; 


function createCalendar(calDate) { 
var calendarHTML = "<table id='calendar_table'>"; 
calendarHTML += "</table>"; 
return calendarHTML; 


} 


The thisDay variable stores the current date. For the purposes of this example, you will 
set the date to September 24, 2021. The next line of the function stores the HTML code 
for the calendar in the div element with the ID calendar that you have just created. 
Initially this HTML code, taken from the createCalendar() function, consists only of the 
opening and closing tags of the table element. Note that you place the value of the 
id attribute within single quotes because the entire text string of HTML code is already 
enclosed within double quotes. 


To insert the initial code of the calendar app: 


BD 1. Return to the Iht_calendar.js file in your editor. Insert following code at the 
bottom of the file to set the calendar date: 


/* Set the date displayed in the calendar */ 
var thisDay = new Date("September 24, 2021"); 


BD 2. Next, add the following code to insert the HTML code of the calendar into the 
web page: 


/* Write the calendar to the element with the id "calendar" */ 
document.getElementById("calendar") .innerHTML = 
createCalendar (thisDay) ; 


p 3. ial enelthe inl code for Wi cesteCalnida] function thet cence the 


Figure 10-4 describes the code in the file. 
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Figure 10-4 Initial code for the calendar app 


sample date for 
the calendar 


/* Write the calendar to the element with the id "calendar" */ 
document. getElementBylId("calendar”).innerHTML = createCalendar(thisDay); 


/* Set the date displayed in the cz 
var thisDay = new Date("September 3 


pendar a7 
» 2021")>5 


the createCalendar() 
function writes the 
HTML code for the 
calendar table 


/* Function to generate the calendar table */ 
‘unction createCalendar (calDats ): £ 
var calendarHTNML = "<table id='calendar_ 
calendarHTML += "</table>"; 
return calendafHTML; 


>Le'> "5 (writes the calendar 
table to the web page 


} 


initial value of the 
calendarHTML variable 


the += assignment operator 
adds a text string to the value 


of the calendarHTML variable 


BD 4. Save your changes to the file. 


Next, you will start to write the code to create the contents of the calendar table. The 
three main tasks to complete the calendar table are as follows: 


¢ Create a caption displaying the month and the year 
¢ Create the table row containing the names of the days of the week 
¢ Create rows for each week in the month with cells for each day in the week 


In this session, you will learn how to create a calendar table caption. In the next 
session, you will complete the rest of the table. 


Introducing Arrays 


Lewis wants the calendar table caption to display the text Month Year, where Month 
is the name of the month and Year is the four-digit year value. In the last tutorial, you 
learned that you can use the getMonth() method of the JavaScript Date object to 
extract a month number and the getFullYear() method to extract the four-digit year 
value. For example, a Date object storing the date March 18, 2021 has a month value 
of 2 (because month values start with 0 for the month of January) and a four-digit year 
value of 2021. However, Lewis wants the month name rather than the month number 
to appear in the table but, because no Date method returns the name of the month, 
you will have to write code to associate each month number with a month name. One 
way of doing this is by using an array. 

An array is a collection of values organized under a single name. Each individual 
value is associated with a number known as an index that distinguishes it from other 
values in the array. Array values are referenced using the expression 


array [i] 
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A common programming 
mistake is to use paren- 
thesis symbols () rather 
than square brackets [ ] to 
create and reference array 
values. 


where array is the name of the array and i is the index of a specific value in the array. 
Index values start with 0 so that the initial item in an array has an index value of 0, the 
second item has an index value of 1, and so on. For example, the expression 


monthName [4] 


references the fifth (not the fourth) item in the monthName array. 


Creating and Populating an Array 
To create an array, you can apply the object constructor 
var array = new Array(length) ; 


where array is the name of the array and length is the number of items in the array. The 
length value is optional; if you omit this parameter, the array expands automatically as 
more items are added to it. However, by defining the length of an array, JavaScript will 
allot only the amount of memory needed to generate the array so that the code runs more 
efficiently. Thus, to create an array named monthName for the 12 month names, you 
would enter the following statement: 


var monthName = new Array(12) ; 
Alternatively, you could omit the array length and enter the statement as follows: 
var monthName = new Array() ; 


Once you have created an array, you can populate it with values using the same 
commands you use for any variable. The only difference is that you must specify both the 
array name and the index number of the array item. The command to set the value of a 
specific item in an array is 


array[i] = value; 


where value is the value assigned to the array item with the index value i. For example, 
to insert month names in the monthName array, starting with January, you could enter the 
following statements: 


monthName [0] = "January"; 
monthName[1] = "February"; 
monthName [11] = "December"; 


Rather than writing each array value in a separate statement, you can populate the 
entire array in a single statement using the following command 


var array = new Array(values) ; 


where values is a comma-separated list of the values in the array. The following 
command places twelve month names into the monthName array ina single statement: 


var monthName = new Array("January", "February", "March", "April", 
"May", "June", "July", "August", "September", "October", "November", 
"December" ) ; 


The index numbers are based on the position of the values in the list. The first item in the 
list (“January”) would have an index number 0, the second (“February”) would have an 
index of 1, and so forth. 

A final way to create an array is with an array literal, in which the array values are a 
comma-separated list within a set of square brackets. The expression to create an array 
literal is 


var array = [values]; 
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where values are the values of the array. The following command uses the array literal 
form to store an array of month names: 


var monthName = ["January", "February", "March", "April", "May", 
"June", "July", "August", "September", "October", "November", 
"December" ] ; 


If you know the contents of your array, it is usually quicker and easier to set up your 


erence, array using the array literal notation. 


literal that you populate Array values do not need to be the same data type. You can mix numeric values, text 
later in the program, leave strings, and other data types within a single array, as demonstrated by the following 
the brackets blank as in statement: 


the command var x = []; 
var x = ["April", 3.14, true, null]; 


Creating and Populating Arrays 
e To create an array, use the object constructor 
var array = new Array(length) ; 


where array is the name of the array and length is the number of items in the array. 
The optional length value sets the array to a specified size; if omitted, the array 
expands as new items are added to it. 

¢ To set the value of an item within an array, use the command 


REFERENCE 


array[i] = value; 


where i is the index of the array item and value is the value assigned to the item. 
¢ To create and populate an array within a single command, use 


var array = new Array(values) ; 


where values is a comma-separated list of values. 
° To create an array using the array literal format, use the following statement: 


var array = [values]; 


Now that you have seen how to create and populate an array, you will create an 
array of month names to use in your calendar application. You will insert the array in a 
function named calCaption() whose purpose is to write the HTML code of the calendar 
caption. The function has a single parameter named calDate that stores a Date object 
containing the current date. 


To create the calCaption() function: 
BD 1. Return to the Iht_calendarjs file in your editor. 


D 2. At the bottom of the file, insert the following function to write the caption of 
the calendar table and create the monthName array: 


/* Function to write the calendar caption */ 
function calCaption(calDate) { 
// monthName array contains the list of month names 
var monthName = ["January", "February", "March", "April", 
"May" , "June" . "July" E "August" 7 " September" is 
"October", "November", "December"] ; 
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BD 3. Next, within the function, use the getMonth() and get Fullyear () 
methods to extract the month number and 4-digit year number from the 
calDate parameter by entering the following commands: 


// Determine the current month 
var thisMonth = calDate.getMonth() ; 


// Determine the current year 
var thisYear = calDate.getFullYear () ; 


D 4. Finally, complete the function by returning the caption tag for the calendar 
containing the month name and 4-digit year number. To display the month 
name, use the monthName array with the value of the thisMonth variable as 
the index number. Enter the code: 


// Write the caption 
return "<caption>" + monthName[thisMonth] + " " + thisYear + 
"</caption>"; 


} 


D 5. Scroll up to the createCalendar() function and insert the following statement 
directly before the command calendarHTML += "</table>";: 


calendarHTML += calCaption(calDate) ; 


This code calls the calCaption() function, which returns the HTML code of the 
table caption. Figure 10-5 describes the newly added code. 


Figure 10-5 The calCaption() function 


the calCaption() 
function writes the 
HTML code for the 


table caption 


creates an array of 
the month names 


extracts the month 
number of the 
current month 


function 


calls the calCaption() 
function to insert 
the HTML code for 
the table caption 


Var . | HT i = =. € c | ‘ 
calendarHTML += calCaption(calDate); 
calendarHTML ¢= tab! ° 

eturn calendarHTML; 


/* Function to write the calendar caption */ 
function calCaption(caldate) { 
// monthName array contains the List of month names 
var monthName = ["“January", “February”, "March", “April”, 


"May", "June", "July", "August", "September", 
"October", “November”, "“December"]; 


// Determine the current month 
var thistMonth = calDate.getMonth(); 


// Determine the current year 


[ tp. thisYear = calDate.getFullYear(); 


extracts the 4-digit 
year value 


// Write the caption 
return “<caption>" ¢ monthName[thisMonth] « " " + thisYear ¢ “</caption>"; 


returns the HTML displays the name of the displays the year based 
code for the table month drawn from the on the extracted 4-digit 
caption monthName array year value 
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D 6. Save your changes to the file, and then open Iht_sept.html in your browser. 
Verify that the web page now shows the caption of the calendar table with 
the September 2021 date as shown in Figure 10-6. 


Calendar caption displayed in the web page 


Broadway starts Out 8 great sutumn at Prologue DASED On the wrRings of George latest developments in cognmtive research 
the LHT with seven performances of Orwell with Packing your Dreams and David Wu 
Haméiten, starring Tre Dawes. These Gscusses Quantum entanglement in What 
performances are sure to sell out, so The young will enjoy Mave Spacesut. Will — pinstein Got Wrong. 
order your seats today. Travel - & stage production using more 

than 500 images to create a living graphic §=—_ Join us om Sunday for Classics Brunch with 
We're not done with Broadveay yet, as novel of Robert A. Heinlein's classic music provided by the Carson Ouatet 
popular singer Toni Trindle provides & science fiction story. Seating is limited, so please reserve your 
great evening of jazz standards in table for this popular series 
Stardust Memories and Ted Gilam School's in session with our continuing 
presents his one-man show, Ihe Future is - /sture series, Mary Dees presents the 

September 2021] 


calendar table caption 


written using JavaScript 


Trouble? If the caption does not appear in the page, your code might contain 
a mistake. Check your code against the code shown in the previous figures. 
Common sources of error include forgetting to close all quoted text strings, 
failing to match the use of uppercase and lowercase letters in function names 
and variable names, misspelling function names and variable names, and 
failing to close parentheses and brackets when required. 


Next, you will explore the properties and methods associated with arrays. 


Working with Array Length 


A JavaScript array automatically expands in length as more items are added. To 
determine the array’s current size, apply the following Length property 


array.length 


where array is the name of the array. The value returned by the length property is 
equal to one more than the highest index number in the array (because array indices 
start at O rather than 1), so, if the highest number in the index is 11, then the value 
returned would be 12. 

JavaScript allows for the creation of sparse arrays, in which some array values are 
undefined. As a result, the Length value is not always the same as the number of array 
values. For example, the following commands create a sparse array in which only the 
first and last items have defined values: 


var x = new Array(); 
x[0] = "Lewis"; 
x[99] = "80517"; 
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The value of the Length property for this array is 100 even though it only contains 
two values. Sparse arrays occur frequently in database applications involving customer 


You can add new items to : : 
the end of any array using records where items such as mobile phone numbers or postal codes have not been 


the command arraylarray. entered for every person. 
length] = value; 


Specifying Array Length 
¢ To determine the size of an array, use the property 
array.length 


where array is the name of the array and length is one more than the highest index 
number in the array. 
¢ To add an item to the end of an array, run the command 


REFERENCE 


array[i] = value; 


where i is an index value higher than the highest index currently in the array. If you 
don’t know the highest index number, use the property array.length in place of i. 
¢ To remove items from an array, run the command 


anray length = value; 


where value is an integer that is smaller than the highest index currently in the array. 


Note that you cannot reduce the value of the length property without removing items 
from the end of your array. For example, the following command would reduce the 
monthName array to the first three months—January, February, and March: 


monthName.length = 3; 


Increasing the value of the length property adds more items to an array, but the items 
have null values until they are defined. 
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g, 
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Problem Solving: Using Multidimensional Arrays 


Many database applications need to store data in a rectangular format known as a 
matrix, in which the values are arranged in a rectangular grid. The following is an 
example of a matrix laid out in a grid of three rows and four columns: 


eae See eee ail 
1237846 
eS 710 4 


PROSKILLS 


The rows and columns in a matrix form the basis for indices. For example, the 
value 18 from this matrix is referenced using the index pair (2, 3) because the value 18 
appears at the intersection of the second row and third column. 

Although matrices are commonly used in databases (where each row might repre- 
sent an individual and each column a characteristic of that individual), JavaScript does 
not support matrices. However, you can mimic the behavior of matrices in JavaScript 
by nesting one array within another in a structure called a multidimensional array. For 
example, the following code creates the array mArray, which contains a collection of 
nested arrays: 


var mArray = 


IA, aS, 8, Ally 
[l, 3, did, oll, 
ei, WH, al@, 24 


Note that the values of this array match the values of the matrix shown above. In 
this case, the first nested array matches the first row of the matrix, the second array 
matches the second row, and the third array matches the third row. The values of the 
nested arrays are matched with each of the four columns. 

Values within a multidimensional array are referenced by the expression 


array [x] Ly] 


where x contains the index of the outer array (the row) and y contains the index of the 
nested array (the column). Thus, the expression 


mArray [1] [2] 


returns the value 18 from the matrix’s second row and third column (remember 
that indices start with 0, not 1). The number of rows in a multidimensional array 
is given by the length property. The number of columns can be determined by 
retrieving the length property for the first row of the table. For example, the 
expression 


mArray [1] .length 


would return a value of 4 for the fours columns in mArray. Note that this approach 
presumes that every row has the same number of columns. You can continue to nest 
arrays in this fashion to create matrices of even higher dimensions. 


Reversing an Array 


Arrays are associated with a collection of methods that allow you to change their 

content, order, and size. You can also use these methods to combine different arrays 
into a single array and to convert arrays into text strings. Although you will not need 
to use these methods in the calendar app, you will examine them for future projects. 
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By default, items are placed in an array either in the order in which they are defined 
or explicitly by index number. JavaScript supports two methods for changing the order 
of these items: reverse () and sort (). The reverse() method, as the name 
suggests, reverses the order of items in an array, making the last items first and the 
first items last. In the following set of commands, the reverse () method is used to 
change the order of the values in the weekDay array: 


var weekDay = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; 
weekDay. reverse () ; 


After running the reverse () method, the weekDay array would contain the items in 
the following order: “Sat”, “Fri”, “Thu”, “Wed”, “Tue”, “Mon”, and finally, “Sun”. 


Sorting an Array 


The sort () method rearranges array items in alphabetical order. This can cause 
unexpected results if you apply the sort () method to data values that are not usually 
sorted alphabetically. Applying the sort () method to numeric values, will sort the 
values in order by their leading digits, rather than by their numerical values. Thus, 
applying the sort () method in the following set of commands 


var x = [3, 45, 1234, 24]; 
x.sort(); 


would result in the order 1234, 24, 3, 45 because this is the order of those numbers 

when sorted by their leading digits. To correctly sort numeric data, you must create a 
compare function that compares the values of two adjacent array items. The general 

form of a compare function is 


function fname(a, b) { 
return a negative, positive, or 0 value 


where fname is the name of the compare function, and a and b are parameters that 
represent a pair of array values. The function then returns a negative, positive, or zero 
value based on the comparison of those values. If a negative value is returned, then a 
is placed before b in the array. If a positive value is returned, then b is placed before 
a, and finally, if a zero value is returned, a and b retain their original positions. The 
compare function is applied to every pair of values in the array to ensure they are 
sorted in the proper order. 

The following compare function could be used to sort numeric values in 
ascending order 


function ascending(a, b) { 
return a - b; 
} 


whereas to sort numbers in a descending order, you could apply the following 
function, which subtracts a from b, rather than b from a: 


function descending(a, b) { 
return b - a; 
} 


Other compare functions are possible to deal with a wide variety of sorting rules, but 
these two are the simplest for sorting arrays of numeric values. 
The compare function is applied to the sort () method as follows 


array.sort (fname) 


You can also sort an array 
in descending order by 
sorting it first in ascend- 
ing order and then by 
applying the reverse () 
method to reverse the 
sorted order of the array. 


INSIGHT 
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where fname is the name of the compare function. For example, to use the ascending() 
compare function to sort the x array described earlier in ascending numeric order, you 
would run the following command: 


x.sort (ascending) 


After applying the sort () method with the ascending function, the values in the 
x array would be sorted in ascending numeric order as: 3, 24, 45, and finally, 1234. 


Performing a Random Shuffle 


For some applications, you will want to randomly rearrange the contents of an array. 
For example, you might be writing a program to simulate a randomly shuffled deck 
of cards. You can shuffle an array using the same sort () method you use to place 
the array in a defined order; however, to place the items in a random order, you use a 
compare function that randomly returns a positive, negative, or 0 value. The following 
compare function employs a simple approach to this problem: 


function randOrder () { 
return 0.5 - Math.random() ; 


} 


The following code demonstrates how this compare function could be used to 
randomly shuffle an array of poker cards: 


var pokerDeck = new Array(52) ; 


pokerDeck[0] = "2 of Clubs"; 
jooKereDeche|Lil]] = 3 oie Ciliblos” 5 
pokerDeck[51] = "Ace of Spades"; 


pokerDeck.sort (randOrder) 


After running this command, the contents of the pokerDeck array will be placed in 
random order. To reshuffle the array, you would simply rerun the sort () method with 
the randOrder() function. 


Extracting and Inserting Array Items 


In some scripts, you might want to extract a section of an array, known as a subarray. 
One way to create a subarray is with the following slice () method 


array.slice(start, stop) 


where start is the index value of the array item at which the slicing starts and stop is 
the index value at which the slicing ends. Note that the stop index value is not included 
in the subarray. The stop value is optional; if it is omitted, the array is sliced to its 

end. The original contents of the array are unaffected after slicing, but the extracted 
items can be stored in another array. For example, the following command slices the 
monthName array, extracting only three summer months—June, July, August—and 
storing them in the summerMonths array: 


summerMonths = monthName.slice(5, 8); 


Remember that arrays start with the index value 0, so the sixth month of the year (June) 
has an index value of 5 and the ninth month of the year (September) has an index 
value of 8. 

Related to the slice () method is the following splice () method 


array.splice(start, size, values) 
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which is a general-purpose method for removing and inserting array items, where 
start is the starting index in the array, size is the number of array items to remove 
after the start index, and values is an optional comma-separated list of values to 
insert into the array. If no values are specified, the splice method simply removes 
items from the array. 

The following statement employs the splice () method to remove the summer 
months from the monthName array: 


summerMonths = monthName.splice(5, 3); 


However, to insert new abbreviations of month names into the monthName array, 
you could apply the following splice () method which places the values “Jun”, “Jul”, 
and “Aug” into the array starting with the 5" index number: 


monthName.splice(5, 3, "Jun", "Jul", "Aug"); 


The important difference between the slice () and splice () methods is that 
the splice () method always alters the original array, so you should not use the 
splice () method if you want the original array left unaffected. 


Using Arrays as Data Stacks 


Arrays can be used to store information in a data structure known as a stack in which 
new items are added to the top of the stack—or to the end of the array—much like a 
person clearing a dinner table adds dishes to the top of a stack of dirty plates. A stack 
data structure employs the last-in first-out (LIFO) principle in which the last items 
added to the stack are the first ones removed. You encounter stack data structures when 
using the Undo feature of some software applications, in which the last command you 
performed is the first command that is undone. 

JavaScript supports several methods to allow you to work with a stack of array items. 
For example, the push() method appends new items to the end of an array. It has the 
syntax 


array.push (values) 


where values is a comma-separated list of values to be appended to the end of the 
array. To remove—or unstack—the last item, you apply the pop () method, as follows: 


array.pop () 


The following set of commands demonstrates how to use the push() and pop () 
methods to employ the LIFO principle by adding and then removing items from a 


data stack: 
var X = ["a", "pb", We |e 
x.push("d", "e"); // x = ["a", "b", "aM, "qn, men] 
x.pop(); // x = ["a", "b"™, "am, mgr] 
x.pop(); J// x = ["a", "b"™, "a"] 


In this code, the push () method adds two items to the end of the array, and then the 
pop () method removes those last items one at a time. 

A queue, which employs the first-in-first-out (FIFO) principle in which the first 
item added to the data list is the first removed, is similar to a stack. You see the 
FIFO principle in action in a line of people waiting to be served. For array data 
that should be treated as a queue, you use the shift () method, which is similar 
to the pop () method except that it removes the first array item, not the last item. 
JavaScript also supports the unshift () method, which inserts new items at the 
front of the array. 


REFERENCE 
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Using Array Methods 
e To reverse the order of items in an array, use the method 
array.reverse () 


where array is the name of the array. 
¢ To sort an array in alphabetical order, use the following method: 


AEG AS Oise (ir 
e To sort an array in any order, use 
array.sort (fname) 


where fname is the name of a compare function that returns a positive, negative, or 
0 value. 
* To extract items from an array without affecting the array contents, use 


array.slice(start, stop) 


where start is the index of the array item at which the slicing starts and stop is the 
index at which the slicing ends. If no stop value is provided, the array is sliced to the end 
of the array. 

¢ To remove items from an array, use 


array.splice(start, size) 


where start is the index of the array item at which the splicing starts and size is the 
number of items to remove from the array. If no size value is specified, the array is 
spliced to its end. 

e To replace items in an array, use 


array.splice(start, size, values) 


where values is a comma-separated list of new values to replace the old values in 
the array. 
© To add new items to the end of an array, use 


array.push (values) 


where values is a comma-separated list of values. 
° To remove the last item from an array, use the following method: 


array.pop () 


Figure 10-7 summarizes several other methods that can be applied to arrays. Arrays 
are a powerful and useful feature of the JavaScript language. The methods associated with 
arrays can be used to simplify and expand the capabilities of web page scripts. 


HTML 768 


HTML 5 and CSS | Tutorial 10 Exploring Arrays, Loops, and Conditional Statements 


Figure 10-7 Array methods 


Method 


Description 


copyWithin(target, start[, end] ) 


concat(arrayl, array2,...) 
fill(value[, start] [, end]) 


indexOf (value[, start] ) 


join (separator) 


lastIndexOf (value[, start] ) 


pop () 


push (values) 


reverse () 
shift () 


slice(start, stop) 


array.splice(start, size, values) 


array.sort (fname) 


array.toString() 


array.unshift (values) 


Copies items within the array to the target index, 
starting with the start index and ending with the 
optional end index 


Joins the array to two or more arrays, creating a single 
array containing the items from all the arrays 


Fills the array with items having the value value, start- 
ing from the start index and ending at the end index 


Searches the array, returning the index number of the 
first element equal to value, starting from the optional 
start index 


Joins all items in the array into a single text string; the 
array items are separated using the text in the 
separator parameter; if no separator is specified, a 
comma is used 


Searches backward through the array, returning the 
index number of the first element equal to value, 
starting from the optional start index 


Removes the last item from the array 


Appends the array with new items, where values is a 
comma-separated list of item values 


Reverses the order of items in the array 
Removes the first item from the array 


Extracts the array items starting with the start index 
up to the stop index, returning a new subarray 


Extracts size items from the array starting with the 
item with the index start; to insert new items into the 
array, specify the array items in a comma-separated 
values list 


Sorts the array where fname is the name of a 
function that returns a positive, negative, or 0 value; 
if no function is specified, array is sorted in 
alphabetical order 


Converts the contents of the array to a text string with 
the array values in a comma-separated list 


Inserts new items at the start of the array, where values 
is a comma-separated list of new values 


You set up the first parts of the online calendar in this session. In the next sessions, you 
will complete the monthly calendar by working with loops and conditional statements. 
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a Session 10.1 Quick Check 


1. Which command creates an array named dayNames using the object 


constructor form? 
a. var dayNames = Array; 


REVIEW 


b. var dayNames is Array; 
Cc. var dayNames = new Array(); 
d. var dayNames = Array(); 

2. Which command uses the array literal form to create and populate the 
dayNames array with the abbreviations of weekdays (starting with Mon and 
going through Fri)? 


a. var dayNames = ("Mon", "Tue", "Wed", "Thu", "Fri"); 
b. var dayNames = ["Mon", "Tue", "Wed", "Thu", "Fri"]; 
c. var dayNames = { "Mon", "Tue", "Wed", "Thu", "Fri" } - 


d. All of the above 


3. Which command returns the third value from the dayNames array? 
a. dayNames [2] 
b. dayNames [3] 
c. dayNames.3 
d. dayNames:3 


4. Which command sorts the dayNames array in alphabetical order? 
a. sort (dayNames) ; 
b. daysNames.sort 
Cc. Sort (dayNames) ; 
d. dayNames.sort () ; 
5. Which command extracts the middle five values from the dayNames array? 
a. dayNames.cut (1,6) ; 
b. dayNames.cut (0,5); 
c. dayNames.extract (0,5); 
d. dayNames.slice(1, 6); 
6. An array in which some array values are undefined is a(n): 
a. empty array 
b. minor array 
c. sparse array 
d. multidimensional array 
7. To append a new item to an existing array, use the: 
a. pop() method 
b. push() method 
c. add() method 
d. All of the above 
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Session 10.2 Visual Overview: 


The update expression 
updates the counter 
variable each time 
through the loop. 


The continue expression 
is a Boolean expression 
that must be true for the 
loop to continue. 


7 
The start expression 
provides the starting function en Row() { 
value of the counter 
variable, i. 


"MON", “TUE’ "WED". “THU”. “FRI”, *SAT" 12 


; oY 
A for loop is a 


programming structure 
in which a set of for (var = 6; i < dayName. length; i++) 

commands is repeated rowHTML += "“«t lass='calenda weekdays'>" ¢ dayName [ 4 ] + 
based on the changing } 
values of a counter 

variable. rOWHTML #= “«/tr>"; 
oa return rowHTML; 


The same command block is 
executed with different values of 


the counter variable during each 
iteration of the for loop. 
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Applying a Program Loop 


September at the Lyman Hall Theater 


Broadway starts out a great autumn at Prologue based on the writings of George latest developments in cognitive research 
the LHT with seven performances of Orwell. with Hacking your Dreams and David Wu 
Hamilton, starring Tre Dawes. These Gscusses Quantum entanglement in What 
performances Bre sure to sell Out. $0 The young will enjoy Have Soacesuit. Will — Finetesn Got wrong. 
order your seats today. Travel = 8 stage production using more 

than $00 images to create a living graphic = Join us on Sunday for Classics Brunch with 
We're not done with Broadway yet. as novel of Robert A. Heinlein's classic music provided by the Carson Quartet. 
popular singer Toni Trindle provides a science fiction story. Seating is limited, so please reserve your 
great evening of jazz standards in table for this popular series. 
Stardust Memories and Ted Giltam School's in session with our continuing 


presents his one-man show, The Future is  ‘ecture series. Mary Dees presents the 


September 2021 


The days of the week are 
written using a program loop 
that repeats a set of similar 
commands until a stopping 
condition is met. 


aa 
The code created for the table row is as follows: 


= ti 
<th class='calendar _ weekdays'>SUN</th> 
<th class='calendar _ weekdays'>MON</th> 
<th class='calendar _ weekdays'>TUE</th> 
<th class='calendar _ weekdays'>WED</th> 
<th class='calendar _ weekdays'>THU</th> 
<th class='calendar _ weekdays'>FRI</th> 
<th class='calendar weekdays'>SAT</th> 

</tr> = 


——S 
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Working with Program Loops 


Now that you are familiar with the properties and methods of arrays, you will return to 
working on the calendar app. So far, you have created only the table caption displaying 
the calendar’s month and year. The first row of the table will contain the three-letter 
abbreviations of the seven days of the week, starting with SUN and continuing through 
SAT. Each abbreviation needs to be placed within an element with the class name 
calendar_weekdays using the following code: 


<tr> 
<th class='calendar_weekdays'>SUN</th> 
<th class='calendar_weekdays'>MON</th> 
<th class='calendar_weekdays'!>TUE</th> 
<th class='calendar_weekdays'>WED</th> 
<th class='calendar_weekdays '>THU</th> 
<th class='calendar_weekdays'>FRI</th> 
<th class='calendar_weekdays'>SAT</th> 

</tr> 


This code contains a lot of repetitive text with the same th element and class name 
repeated seven times. Imagine if you had to repeat essentially the same string of 

code dozens, hundreds, or even thousands of times—the code would become 
unmanageably long. Programmers deal with this kind of situation by creating program 
loops. A program loop is a set of commands executed repeatedly until a stopping 
condition is met. Two commonly used program loops in JavaScript are for loops and 
while loops. 


Exploring the for Loop 


In a for loop, a variable known as a counter variable is used to track the number of 

times a block of commands is run. Each time through the loop, the value of the counter 
variable is increased or decreased by a set amount. When the counter variable reaches 
or exceeds a specified value, the for loop stops. The general structure of a for loop is 


for (start; continue; update) { 
commands 


where start is an expression that sets the initial value of a counter variable, continue 
is a Boolean expression that must be true for the loop to continue, update is an 
expression that indicates how the value of the counter variable should change each 
time through the loop, and commands are the JavaScript statements that are run for 
each loop. 

Suppose you want to set a counter variable to range in value from 1 to 4 in 
increments of 1. You could use the following expression to set the initial value of the 
counter variable: 


var i= 1; 


The name of the counter variable in this example is i, which is a common variable 
name often applied in program loops. 

The next expression in the for loop structure defines the condition under which the 
program loop continues. The following expression sets the loop to continue as long as 
the value of the counter variable is less than or equal to 4: 


i <= 4; 


Finally, the following update expression uses the increment operator to indicate that 
the value of the counter variable increases by 1 each time through the program loop: 


l+4+; 
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Putting all of these expressions together, you get the following for loop: 


for (var i= 1; i <= 4; i++) { 
commands 


The collection of commands that is run each time through a loop is known collectively 
as a command block, a feature you have already worked with in functions. A command 
block is indicated by its opening and closing curly braces {  }. The following is an 
example of a £or loop that adds the HTML code for four td elements to a table row: 


var htmlCode = "<tr>"; 

for (var i= 1; i <= 4; i++) { 
htmlCode += "<td>" 4+ i + "</td>"; 

} 


htmlCode += "</tr>"; 


As shown in Figure 10-8, each time through the loop, the value displayed in the 
table cell is changed by 1. 


Figure 10-8 Writing HTML code with a for loop 


starting value of the continue update after 
counter variable iftrue each loop 


var htm1Code = "<ty>"; 
for (var i = 1; i <= 4; i++) { 


for loop 1 htmlCode += "<td>" + i + "</td>"; 
} 
htmlCode += "</tr>"; 


4 


<tr> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
</tr> 


resulting HTML code 


One for loop can be nested within another. Figure 10-9 shows the code used to 
create a table with two rows and three columns. 
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Figure 10-9 Nested for loop 


var htmlCode = "<table>"; 

for (var rowNum = 1; rowNum <= 2; rowNum+t+) { 
htmlCode += "<tr>"; 
for (var colNum = 1; colNum <= 3; colNum++) { 


for loop } 
htmlCode += "</tr>"; 


} 
htmlCode += "</table>"; 


nested htmlCode += "<td>" + rowNum + "," + colNum + "</td>"; 


<table> 
<tr> 
<td>) l</td=<td=iy J /tde<tdailsi</td> 


resulting HTML Sie 


code ee 
Site Cl la steCle= ts ly Amaya Cle tel Sai ate l= 


</tr> 
</table> 


This example uses two counter variables named rowNum and colNum. The 


rowNum variable loops through the values 1 and 2 and for each of those values, the 
colNum variable loops through the values 1, 2, and 3. Each time the value of the colNum 
variable changes, a new cell is added to the table. Each time the value of the rowNum 


variable changes, a new row is added to the table. 


The update expression is not limited to increasing the counter by 1. You can use the 
other operators introduced in the previous tutorial to create a wide variety of increment 
patterns. Figure 10-10 shows a few of the many different ways of updating the value of 


the counter variable in a for loop. 


Figure 10-10 for loop counter values 


for Loop Counter Values 

for (var i = 1; i <= 5; i++) i=1,2,3,4,5 

for (var i = 5; i > 0; i--) i=5,4,3,2,1 

for (var i = 0; i <= 360; i+=60) i= 0, 60, 120, 180, 240, 360 
for (var i = 1; i <= 64; i*=2) i= 1,2, 4,8, 16, 32, 64 


Exploring the while Loop 


The for loop is only one way of creating a program loop in JavaScript. The while 
loop, in which a command block is run as long as a specific condition is met, is similar 
to the for loop. However, unlike the for loop, the condition in a while loop does 
not depend on the value of a counter variable. The while loop has the general syntax 


while (continue) { 
commands 
} 


where continue is a Boolean expression that must be true for the command block to 


be run; otherwise, the command block is skipped and the program loop ends. 
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The following code shows how to create the table shown earlier in Figure 10-8 as a 
while loop: 


var htmlCode = "<tr>"; 

var i=1; 

while (i <= 4) { 
htmlCode += "<td>" 4+ i + "</td>"; 
1+4+; 


} 


The while loop continues as long as the value of the i variable remains less than or 
equal to 4. Each time through the command block, the loop writes the value of i into a 
table cell and then increases the counter by 1. 

Like for loops, while loops can be nested within one another. The following 
code demonstrates how to create the 2 x 3 table shown earlier in Figure 10—9 using 
nested while loops: 


var htmlCode = "<table>"; 
var rowNum = 1; 
while (rowNum <= 2) { 
htmlCode += "<tr>"; 
var colNum = 1; 
while (colNum <= 3) { 
htmlCode += "<td>" + rowNum + "," + colNum + "</td>"; 
colNum++; 
} 
htmlCode += "</tr>"; 
rowNum++ ; 


} 


Again, the initial values of the counter variables are set before the while loops are run 
and are updated within the command blocks. 
Because for loops and while loops share many of the same characteristics, 


which one you choose for a given application is often a matter of personal preference. 
Use a for loop when your 


loop contains a counter In general, for loops are used whenever you have a counter variable and while 
variable. Use awhileloop loops are used for conditions that don’t easily lend themselves to using counters. For 
for a more general example, you could construct a while loop that runs as long as the current time falls 
stopping condition. within a specified time interval. 


Exploring the do/while Loop 


In the £or and while loops, the test to determine whether to continue the loop is 
made before the command block is run. JavaScript also supports a program loop called 
do/while that tests the condition to continue the loop right after the latest command 
block is run. The structure of the do/while loop is as follows: 

do { 


commands 


} 


while (continue) ; 


For example, the following code is used to create the table shown earlier in Figure 10-8 as 
a do/while loop: 


var htmlCode = "<tr>"; 

var i=1; 

do { 
htmlCode += "<td>" + i + "</td>"; 
1+4+; 


} 
while (i <= 4); 
htmlCode += "</tr>"; 
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The do/while loop is usually used when the program loop should run at least once 
before testing for the stopping condition. 

The <= symbol used in these program loops is an example of a comparison operator. 
Before continuing your work on the calendar app, you examine the different types of 
comparison operators supported by JavaScript. 


Comparison and Logical Operators 


A comparison operator is an operator that compares the value of one expression to 
another returning a Boolean value indicating whether the comparison is true or not. 
Thus, the following expression uses the < comparison operator to test whether the 
value of the x variable is less than 100: 


x < 100 


If this comparison is true, the expression returns the Boolean value true and, if 
otherwise, false. Figure 10-11 lists the comparison operators supported by JavaScript. 


Figure 10-11 Comparison operators 


Operator Example Description 

== x == y Tests whether x is equal in value to y 

=== x == y Tests whether x is equal in value to y and has the same 
data type 

ts x f== y Tests whether x is not equal to y or has a different data 
type 

tes x f== y Tests whether x is not equal to y and/or doesn’t have the 
same data type 

> x > y Tests whether x is greater than y 

>= x >= y Tests whether x is greater than or equal to y 

< x<y Tests whether x is less than y 

<= x <= Y Tests whether x is less than or equal to y 


When you want to test whether two values are equal, you use either a double equal 
sign ( ==) or a triple equal sign (===). The double equal sign tests whether two items are 
equal in value while the triple equal sign tests whether the two items are equal in value 
and also in data type. Thus, the following expression tests whether x is equal in value to 
100 and is a number: 


Using the single equal sign ( = ) for the comparison operator is a common 
programming mistake; remember that the equal sign is an assignment operator and is 
reserved for setting one value equal to another, not for testing whether two values are 
equal. 

JavaScript also supports logical operators that allow you to connect several 
expressions. For example, the logical operator && returns a value of true only if both of 
the expressions are true. Figure 10-12 lists the JavaScript logical operators. 
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Figure 10-12 


Logical operators 


Operator Definition Example Description 

&& and (x === 5) && (y === 8) Tests whether x is equal to 5 and 
y is equal to 8 

|| or (x === 5) || (y === 8) Tests whether x is equal to 5 or y 
is equal to 8 

! not !(x < 5) Tests whether x is not less than 5 


Program Loops and Arrays 


Program loops can be used to cycle through the different values contained within an 
array. The general structure for accessing each value from an array using a for loop is 


for (var i = 0; i < array.length; i++) { 
commands involving array [i] 
} 


where array is the array containing the values to be looped through and i is the 
counter variable used in the loop. The counter variable in this case represents the index 
number of an item from the array. The length property is used to determine the size 
of the array. The last item in the array has an index value of one less than the array’s 
length—because array indices start with zero—so you continue the loop only when the 
array index is less than the length value. 


REFERENCE 


Creating Program Loops 
¢ To create a for loop, use looping structure 


for (start; continue; update) { 
commands 


} 


where start is an expression that sets the initial value of a counter variable, continue is 

a Boolean expression that must be true for the loop to continue, update is an expression 

that indicates how the value of the counter variable should change each time through the 

loop, and commands is the JavaScript commands that are run each time through the loop. 
¢ To create a while loop, use the following structure: 


while (continue) { 
commands 
} 


¢ To create a do/while loop, use the following: 


do { 
commands 


} 


while (continue) ; 
¢ To loop through the contents of an array, enter the for loop 


ore (wee al = Oe of < eherehiZ, Weileielayp ales) { 
commands involving array[i] 
} 


where i is a counter variable representing the indices of the array items and array is 
the array to be looped through. 
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With this information, you can create a function that employs arrays and a for loop to 
create a row displaying the names of the seven days of the week. First, you will place the 
three-letter abbreviation of each weekday in an array and then loop through that array, 
writing a table heading cell for each day. You will place these commands in a function 
named calWeekdayRow(). 


To create the calWeekdayRow/() function: 


D 1. If you took a break after the previous session, make sure the Iht_calendar.js 
file is open in your text editor. 


BD 2. At the bottom of the file, insert the following commands to begin creating 
the function by inserting an array named dayName containing the three- 
letter abbreviations of the seven days of the week: 

/* Function to write a table row of weekday abbreviations */ 
function calWeekdayRow() { 

// Array of weekday abbreviations 

var dayName = ["SUN", "MON", "TUE", "WED", "THU", "FRI", 
"SAT"] Pp 


D 3. Next, create the rowHTML variable containing the opening tag for the table 
row by inserting the following command: 


var rowHTML = "<tr>"; 


og 
a 


Finally, complete the calWeekdayRow() function by adding a closing </tr> 
tag to the value of the rowHTML variable and return that variable’s value. 
Add the code that follows: 


YOWHTML += "</tr>"; 
return rowHTML; 


} 


Figure 10-13 shows the complete contents of the calWeekdayRow() function. 
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Figure 10-13 The calWeekdayRow() function 


array of weekday 
abbreviations 


/* Function to write a table row of weekddy abbreviations */ 


function calWeekdayRow() { 
// Array of weekday abbreviations 


var da = ("SUN", "MON", "TUE", * 


( inserts the opening ED", "THU", "FRE", “SAT"]; 
tag for the table row 
S 4 


// Loop through the dayName array 
for (var i = 0; i < dayName.length; i++) { 

rOWHTML += "<th class='calendar_weekdays'>" + dayName[i] + "</th>"; 
} 


(for loop that loops 
through every item in 
the dayName array 


OWHTML += "“</tr>"5 


a 5 
adds the closing tag raaech COMEITALS 


for the table row 


returns the complete 
HTML code of the 


table row 


D 6. Scroll back up to the createCalendar() function and insert the following 
command as shown in Figure 10-14: 


calendarHTML += calWeekdayRow() ; 


Calling the calWeekdayRow() function 


Function t OE te ft 


function createCalendar(calDate) { 

var calendarHTML = “<table id='calendar_table'>"; 
calendarHTML += calCaption(calDate) ; 

calendarHTML += calWeekdayRow() ; 

calendarHTML += "</table>"; 

return calendarHTML; 


calls the calWeekdayRow() 
function to add the HTML 
code for the heading row 


BD 7. Save your changes to the file, and then reload the Iht_sept.html file in 
p 
your browser. 


Figure 10-15 shows the revised appearance of the page with the calendar 
table now showing a row of weekday abbreviations. 


HTML 780 
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Figure 10-15 Row of weekday abbreviations 


INSIGHT 


Broadway starts out 8 great autumn 3t 
the LHT with seven performances of 
Hamilton, starring Tre Dawes. These 
performances are sure to sell out, so 
order your seats today. 


We're not done with Broadway yet, 5s 
popular singer Toni Trindle provides 8 


Prologue based on the writings of George 
Orwell, 


The young will enjoy Have Spacesuit. vill 
Travel ~ 8 stage production using more 
than 500 images to create a Eving graphic 
novel of Robert A. Heinlein's classic 
science fiction story. 


IRE|R Gevelooments in cognitive research 
with Hactong your Dreams and David Wu 
Giscusses Quantum entanglement in Yhat 
Einstein Got Wrong. 


Join us on Sunday for Classics Reunch with 


music provided By the Carson Quartet. 
Seating is limited, So please reserve your 


great evening of jazz standards in table for this popular series. 
Stardust Memories and Ted Gillam 


presents his one-man show, The Future ts 


School's in session with our continuing 
lecture series. Mary Oces preserts the 


September 2021 


row of weekday 
abbreviations added 
to the calendar table 


Returning a Random Array Item 


In some programs, such as gaming apps, you might want to return a random value 
from an array. You can use the array index numbers along with the Math. random and 
Math. floor methods to achieve this. Assuming that an array is not sparse, the total 
number of array items is provided by the length property. To return a random index 
from the array, you use the expression 


Math. floor (Math.random() *array.length) ; 


where array is the name of the array. The value returned by this expression would be 
a random integer from 0 up to the value Length-1, which corresponds to all of the 
array indices. You could place this expression in a function such as 


function randItem(arr) { 
return arr [Math.floor(Math.random() *arr.length) ] ; 
} 


using the arr parameter as the array to be evaluated. 
To pick a random item from any array, you could apply the randltem() function to 
any array as follows 


["red" F "blue" A "green" 
randItem(color) ; 


Weue Collore = "vyellow"] ; 


var randColor = 


and the randColor variable would contain one of the four colors chosen at random 
from the color array. 


Array Methods to Loop Through Arrays 


JavaScript supports several methods to loop through the contents of an array without 
having to create a program loop structure. Because these methods are built into the 
JavaScript language, they are faster than program loops; however, older browsers might 
not support them, so you should apply them with caution. 


Tutorial 10 Exploring Arrays, Loops, and Conditional Statements | HTML 5 and CSS HTML 781 


Each of these methods is based on calling a function that will be applied to each 
item in the array. The general syntax is 


array.method(callback [, thisArg] ) 


where array is the array, method is the array method, and callback is the name of the 
ieee function that will be applied to each array item. An optional argument, thisArg, can 
parameters can be given be included to pass a value to the callback function. The general syntax of the callback 


any descriptive name you function is 


choose, but the parameters ; : 
mus? se lisedl inde omar function callback(value [, index, array]) { 


value, index, and array commands 
name. } 


where value is the value of the array item during each pass through the array, index is 
the numeric index of the current array item, and array is the name of the array. Only 
the value parameter is required; the others are optional. 


Running a Function for Each Array Item 


The first method you will explore is forEach (), which is used to run a function for 
each item in the array. The general syntax is 


array.forEach(callback [, thisArg] ) 


where callback is the function that is applied to each item in the array. For example, the 
following forEach () method applies the sumArray() function with each item in the x 
array: 


var sum = 0; 
Var x = [2, 5; 7, 12) 


x.forEach(sumArray) ; 


function sumArray(value) { 
sum += value; 


Note that the sumArray() function has a single parameter named value, representing 
the current array item. The result of running the forEach() method with the 
sumArray() function is that the value of each item in the x array is added to the sum 
variable, resulting in a final value of 26 in this example. The forEach () method can 
also be used to modify the values of individual array items. 

The following code calls the stepUp() function to increase the value of each item in 
the x array by 1: 


var x = [4, 7, 11]; 
x.forEach(stepUp) ; 


function stepUp(value, i, arr) { 
arr[i] = value + 1; 
} 


Notice that in this case, the stepUp() function has three parameters, with the second 
parameter (i) representing the array index and the third parameter (arr) representing 
the array itself. After running this code, the x array would contain the values [5, 8, 12]. 


Mapping an Array 


The map () method performs an action similar to the forEach() method except 
that the function it calls returns a value that can be used to map the contents of an 
existing array into a new array. The following code demonstrates how to use the map () 
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method to create a new array in which each item is equal to twice the value of the 
corresponding item in the original array: 


var x = [3, 8, 12]; 
var y = x.map(DoublelIt) ; 


function DoubleIt (value) { 
return 2*value; 


After running this code, the y array contains the values [6, 16, 24]. Note that the 

map () method does not affect the contents or structure of the original array, and the 
new array will have the same number of array items as the original. If the original array 
is sparse with several missing indices, the mapped array will have the same sparseness. 


Filtering an Array 


Often when working with arrays, you will want to extract array items that match some 
specified condition. For example, in an array of test scores, you might want to extract 
only those test scores with a value of 90 or above. The following £ilter () method 
can be used to create such arrays 


array.filter(callback [, thisArg] ) 


where callback is a function that returns a Boolean value of true or false for each 
item in the array. The array items that return a value of true get copied into the new 
array. The following code demonstrates how to use the filter () method to create a 
subarray of items whose value is greater than 90: 


var scores = [92, 68, 83, 95, 91, 65, 77]; 
var highScores = scores.filter(gradeA) ; 


function gradeA(value) { 
return value > 90; 
} 


After running this code, the highScores array would contain the values [92, 95, 91]. 


Passing a Value to a CallBack Function 


If you need to pass a value to a callback function used by any of the array methods, 
you can include the optional thisArg parameter. In the following code, a value of 92 
is entered as argument in the £ilter() method in order to return array items whose 
value is greater than or equal to 92 


INSIGHT 


Niele siconmes = IA, i, 2b, G5, Sil, oS, Wy ¢ 
var highScores = scores.filter(gradeA, 92); 


function gradeA(value) { 
“eturn) valve s= thas; 


} 


resulting in an array with the values [92, 95]. Note that the gradeA function uses the 
JavaScript keyword this to represent the value of the thisArg parameter. The this 
keyword is an important part of the JavaScript language and is used to represent a 
current value being operated upon by the browser. 
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Another common use of arrays is to examine an array’s contents to determine 
whether every array item satisfies a specified condition. The following every () 
method returns the value true if every item in the array matches the condition 
specified by the callback function and, if otherwise, returns false: 


array.every(callback [, thisArg] ) 


As with the £ilter() method, the function used by the every () method must 
return a Boolean value of true or false. For example, the following code uses the 
every () method to test whether every test score exceeds a value of 70: 


var scores = [92, 68, 83, 95, 91, 65, 77]; 
var allPassing = scores.every(passTest) ; 


function passTest (value) { 
return value > 70; 


In this example, the value of the allPassing variable would be false because not every 
value in the scores array is greater than 70. Similarly, the following some () method 


array.some(callback [,thisArg] ) 


returns a value of true if some—but not necessarily all—array items match a condition 
specified in the function and a value of false if none of the array items match the 
condition specified in the function. Applying the some () method to the above array 
would return a value of true because some (but not all) of the scores are greater than 70. 

Figure 10-16 summarizes the different JavaScript array methods that can be used to 
work with the collection of items within an array. 


Figure 10-16 Array methods to loop through arrays 


Array Method Description 

every (callback [, thisArg] ) Tests whether the condition returned by the callback 
function holds for all items in array; in all array methods, 
the optional thisArg parameter is used to pass values to 
the callback function 


filter(callback [, thisArg] ) Creates a new array populated with the elements of 
array that return a value of true from the callback 
function 

forEach(callback [, thisArg] ) Applies the callback function to each item in array 

map(callback [, thisArg] ) Creates a new array by passing the original array items to 


the callback function, which returns the mapped value of 
the array items 
reduce(callback [, thisArg] ) Reduces array by keeping only those items that return 
a value of true from the callback function 
reduceRight (callback [, thisArg]) Reduces array from the last element by keeping 


only those items that return a value of true from the 
callback function 


some (callback [, thisArg]) Tests whether the condition returned by the callback 
function holds for at least one item in array 
find(callback [, thisArg]) Returns the value of the first element in the array that 


passes a test in the callback function 


findIndex(callback [, thisArg]) Returns the index of the first element in the array that 
passes a test in the callback function 
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¢ 


Decision Making: Efficient Loops 


As your programs increase in size and complexity, the ability to write efficient code 
becomes essential. Bloated, inefficient code is particularly noticeable with program 
loops that might repeat the same set of commands hundreds or thousands of times. 
A millisecond wasted due to one poorly written command can mean an overall loss of 
dozens of seconds when it is part of a loop. Because studies show that users will rarely 
wait more than a few seconds for program results, it is important to shave off as many 
milliseconds as you can. Here are some ways to speed up your loops: 


PROSKILLS 


¢ Calculate outside the loop. There is no reason to repeat the exact same calcula- 
tion hundreds of times within a loop. For example, the following code unnecessarily 
recalculates the same Math.log(cost) value a thousand times in the for loop: 
for (i = 0; i < 1000; i++) { 
x[i] = i*Math.log(cost) ; 
} 


Instead, place that calculation outside the loop, where it will be calculated only once: 


var costLog = Math.log(cost) ; 

mere Gl = Op sl e UOWO, as) 4 
se \[al]] = alSCoSicluieles; 

} 


¢ Determine array lengths once. Rather than forcing JavaScript to count up the 
length of a large array each time through the loop, calculate the length before the 


loop starts: 

var x = myArray.length; 

ior (Wee a = Of a < mp iden) { 
commands 


} 


¢ Decrement rather than increment. Instead of counting up to an array length, count 
down from the array length to 0, as in the following for loop: 


var x = myArray.length; 

for (var i= x; i--) { 
commands 

} 


When the counter variable equals 0, the loop will stop. 


¢ Unroll the loop. When only a few items are being iterated in a loop, it is actually 
faster not to use a program loop. Instead, enter each counter value explicitly in sepa- 
rate statements. 


¢ Manage loop size. A long command block is a red flag warning you that you might 
be trying to do too much each time through a loop. Look for ways to reduce the 
number of tasks and calculations in the command block to a bare minimum. 


In the next session, you will explore how to work with JavaScript’s conditional 
statements and put together everything you have learned to complete the calendar app. 
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a Session 10.2 Quick Check 


REVIEW 


1. Which of the following is a type of program loop? 
a. for 
b. while 
Cc. do/while 
d. All of the above 
2. Provide a for statement using a counter variable named i starting with the 


value 0 and continuing to 100 in increments of 10. 
a. for (var i = 0; 100; 10) 
b. for (var i = 0; i<=100; i+=10) 
c. for (var i = 0; i = 100; 10) 
d. for (var i = 0 to 100 by 10) 
3. Provide a for statement using a counter variable named j starting with the 
value 100 and decreasing to 0 in increments of 10. 
a. for (var i = 100; 0; -10) 
b. for (var i = 100; i >= 0; i-=10) 
c. for (var i = 100; i = 0; -10) 
d. for (var i = 100 to 0 by -10) 
4. Provide an expression that tests whether the x variable is not equal to 100. 
a. x <> 100 
b. x .ne. 100 
c. x != 100 
d. x ~= 100 
5. Provide an expression that tests whether the x variable is equal to 10 or the y 
variable is equal to 20. 
a. (x = 10) || (y = 20) 
b. (x = 10) or (y = 20) 
c. (x = 10) | (y = 20) 
d. (x === 10) || (y === 20) 
6. Which method do you apply to run a function for each item in an array? 
a. forEach () 
b. for-each () 
c. forEvery () 
d. every () 
7. Which method do you apply to create a new array based on calculations done 
to every item from an existing array? 
a. forEach() 
b. map () 
c. transfer () 
d. copy () 
8. Which method do you use to return the value of the first element in the array 


that passes a logical test? 
a. find() 

b. if () 

c. while () 

d. findIndex () 
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Session 10.3 Visual Overview: 


A conditional expression 
is an expression that is 
either true or false. 


In an if statement, an 
expression is tested for 
being true or false; if true, 


a specified command is run. 


In an if else statement 
one command block is run 
if the statement is true, 
while a second command 
block is run if the 
statement is false. 


The first command block in 
anif else statement is 
run if the condition is true. 


The command in a simple 
if statement is run if the 
condition is true. 


if G === highlightDay) { 
htmlCode += "<td class='calendar_today'>" + 7 + "</td>"; 


} else f{ 

htmlCode += "<td class='calendar_dates'>" + 7 + "</td>"; 
} 
if (weekDay === 6) htmlCode += "</tr>"| 


The equals operator (=== The second command block 


tests whether two items share inan if else statement is 
the same value and data type. run if the condition is false. 
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Conditional Statements 


function daysInMonth(calDate) { 
var dayCount = [31,28,31,30,31,30,31,31,30,31,30,31]; 


var thisYear = calDate.getFullYear(); The or operator (||) is used 


var thisMonth = calDate.getMonth(); when either of two conditions 
may be true for the entire 
conditional expression to 

be true. 


if (thisYear % 4 === 0) { 
if ((thisYear % 100 !== 0) || (thisYear % 400 === 0)) { 
dayCount[1] = 29; 
} 


} 


return dayCount[thisMonth] ; 


(a ; : 

In anested if structure, one if 
statement is placed within another; 
the nested if statement is run only 
if the conditional expressions of 
both the outer and inner if 
Wesiarement: are true. 
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Introducing Conditional Statements 


Your next task in your calendar app is to create a program loop that writes the days 

of the month, entered within different table cells arranged in separate table rows. The 
process should end when the last day of the month is reached. Because months have 
different numbers of days, you first need to create a function named daysInMonth() that 
determines the number of days in a given month. 

Like the calCaption() function you created earlier, the daysInMonth() function will 
have a single parameter, calDate, containing a Date object on which your calendar 
will be based. The function will also store the year value and month value in the 
variables thisYear and thisMonth, respectively, and will contain the following array that 
stores the number of days in each month: 


var dayCount = [31,28,31,30,31,30,31,31,30,31,30,31]; 


This array is an example of a parallel array because each entry in the array matches— 
or is parallel to—an entry in the monthName array you created in the first session. To 
return the days of the month from the calendar date, the function will use the value of 
the thisMonth variable to reference the corresponding day value in the dayCount array 
with the following expression: 


dayCount [thisMonth] 


So, for instance, given the date July 6, 2018, the function would return the value 31. 
You add the daysInMonth() function now. 


To start creating the daysinMonth() function: 


D 1. If you took a break after the previous session, make sure the Iht_calendar.js 
file is open in your text editor. 


D 2. At the bottom of the file, insert the following code, as shown in Figure 10-17: 


* Function to calculate the number of days in the month */ 
function daysInMonth(calDate) { 

// Array of days in each month 

ver cence = [Sl ,AS, oa, 30, Sil, 30, dab, Sly 30, Saby SO, Sil] p 


// Extract the four digit year and month value 
var thisYear = calDate.getFullYear(); 
var thisMonth = calDate.getMonth() ; 


// Return the number of days for the current month 
return dayCount [thisMonth] ; 
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Figure 10-17 Inserting the daysInMonth() function 


the calDate parameter 
contains the current date 


number of days in ;' 
cxtalty natant a /* Function to calculage the number of days in the month */ 


the year function daysInMonth(ce lDate) { 
// Array of days in each month 
var dayCount = [31,28,31,30,31,30,31,31,30,31,30,31]; 


extracts the year // Extract the four digit year and month value 
value var thisYear = calDate.getFullYear()3; 
var thisMonth = calDate.getMonth() ; 


extracts the month // Return the number of days for the current month 
value return dayCount[thisMonth] ; 


} 
returns the total 
days in the month 


BD 3. Save your changes to the file. 


Perhaps you have already noticed a problem with the dayCount array: February has 
29 days during a leap year, not 28 days as shown in the array. For the daysInMonth() 
function to return the correct value for the month of February, it must examine the 
year value and then set the value for the number of days in February to either 28 or 29 
based on whether the current year is a leap year. You can do this through a conditional 
statement. A conditional statement is a statement that runs a command or command 
block only when certain circumstances are met. 


Exploring the if Statement 
The most common conditional statement is the if statement, which has the structure 


if (condition) { 


} 


where condition is a Boolean expression that is either true or false, and commands 
is the command block that is run if condition is true. If only one command is run, you 
can eliminate the command block and enter the if statement as follows: 


commands 


1£ (condition) command; 


A conditional statement uses the same comparison and logical operators you used 
with the program loops in the last session. For example, the following if statement 
would set the value of the dayCount array for February to 29 if the year value were 
2020 (a leap year): 


if (thisYear === 2020) { 
dayCount [1] = 29; 


} 


For the calendar app, you will need to create a conditional expression that tests 
whether the current year is a leap year and then sets the value of dayCount[1] 
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appropriately. The general rule is that leap years are divisible by 4, so you will start by 
looking at operators that can determine whether the year is divisible by 4. One way 

is to use the % operator, which is also known as the modulus operator. The modulus 
operator returns the integer remainder after dividing one integer by another. For 
example, the expression 15 % 4 returns the value 3 because 3 is the remainder after 
dividing 15 by 4. To test whether a year value is divisible by 4, you use the conditional 
expression 


thisYear % 4 === 0 


where the thisYear variable contains the four-digit year value. The following is the 
complete if statement to change the value of the dayCount array for the month of 
February: 
if (thisYear % 4 === 0) { 
dayCount [1] = 29; 
} 


Add this if statement to the daysInMonth() function now. 


To revise the daysInMonth() function: 


» "afi te Antemant that declaeethe:fieMonty variable, meertthefolowin, 


Figure 10-18 highlights the newly added code in the function. 


Figure 10-18 Inserting an if statement 


tests whether 
thisYear is evenly 
divisible by 4 


if it is, sets the value 
of dayCount{1] 
(February) to 29 


/* Function to calculate the number of days in the month */ 
function daysInMonth(calDate) f{ 
// Array of days in each month 


var dayCount = [31,28,31,30,31,30,31,31,30,31,30,31]; 


// Extract the four digit year and month value 
var thisYear = calDate.getFullYear(); 
var thisMonth = calDate.getMonth(); 


// Revise ue days in February for leap years 
tF (thisYear : 
- day 


sa 


// Return the number of days for the current month 


// 


return dayCount[thisMonth] ; 


BD 2. Save your changes to the file. 


INSIGHT 
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Assigning Values with Conditional Operators 


When you want to simply assign a value to a variable rather than run a command 
block, you can write a more compact conditional expression using a conditional 
operator or a ternary operator, which has the syntax 


condition ? valuel : value2; 


where condition is a Boolean expression, value1 is the value if the expression is 
true and value2 is the value if the expression is false. For example, the following 
statement assigns a value of “Morning” to the session variable if the hour variable is 
less than 12 and “Afternoon” if otherwise: 


var session = hour < 12 ? "Morning" : "Afternoon"; 


Conditional operators can test more than one possible condition by adding a second 
conditional operator to the last term in the expression as follows 


condition1 ? valuel : condition2 ? value2 : value3; 


where valuei is assigned if condition1 is true, value2 is assigned if condition2 
is true (but not condition1), and value3 is assigned if neither condition1 nor 
condition2 are true. Thus, the following statement assigns one of three possible 
values to the session variable based on the value of the hour variable: 


var session = hour < 12 ? "Morning" : hour < 16 ? "Afternoon" 
"Evening"; 


If hour is less than 12, the session variable has the value “Morning”; if hour is less than 
16 (but greater than 12), the value is “Afternoon”; and otherwise, the value of the 
session variable is “Evening”. 

Note that conditional operators can only be used to assign a value. If you need to 
do more than one action in response to a conditional expression, use an if statement. 


Nesting if Statements 


The if statement you wrote for the daysInMonth() function works as a simple 
approximation, but it is not completely accurate. In most cases, a year that is evenly 
divisible by 4 is a leap year. The only exceptions are years that occur at the turn of the 
century, which are evenly divisible by 100. These years are not leap years unless they 
are also evenly divisible by 400. Thus, years such as 1800, 1900, and 2100 are not 
leap years even though they are evenly divisible by 4. Years such as 2000 and 2400 are 
leap years because they are evenly divisible by 400. Figure 10-19 shows the complete 
process used to determine whether a particular year is a leap year. 
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Figure 10-19 Process to calculate leap years 


No Yes 


Yes 


leap year 


To translate these rules into our calendar app, you need to nest one if statement 
inside another one. The general structure of this nested if statement is as follows: 


if (thisYear % 4 === 0) { 
further test for century years 


The nested if statement needs to add two more conditions: (1) the year is not divisible 
by 100, and (2) the year is divisible by 400. The expressions for these two conditions 
are as follows: 


thisYear % 100 != 0 
thisYear % 400 === 0 


If either of those two conditions is true for a year evenly divisible by 4, then the year 
is a leap year. Note that you will use the not equal to operator ( != ) to test for an 
inequality in the first expression. You will then combine these two expressions into a 
single expression using the or operator ( | | ), as follows: 


(thisYear % 100 != 0) || (thisYear % 400 === 0) 
Finally, you will nest this conditional expression as follows: 


if (thisYear % 4 = 
if ((thisYear % 


0 
00 != 0) || (thisYyear % 400 === 0)) { 
dayCount [1] = 29 
} 


} 


Under this set of nested if statements, the number of days in February is 29 only if 
the thisYear variable is divisible by 4, and then only if it is also divisible by 400 or not 
divisible by 100. Take some time to compare this set of nested if statements with the 
chart shown earlier in Figure 10-19 to confirm that it satisfies all possible conditions 
for leap years. After incorporating this set of nested if statements, the daysInMonth() 
function returns the correct number of days for any month in any given year. 
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To complete the daysInMonth() function: 


D 1. Within the if statement you entered in the last set of steps, delete the 
following statement: 


dayCount[1] = 29 
D 2. Replace the statement you just deleted with the following nested if 
statement: 


if ((thisYear % 100 != 0) || (thisYear % 400 === 0)) { 


dayCount[1] = 29; 
} 


Figure 10-20 highlights the newly inserted nested if statement. 


Figure 10-20 Inserting a nested if statement 


if the year is divisible 
by 4 and either not 
divisible by 100 or 
divisible by 400, it's 
a leap year 


Revise the days in 
if (thisYear % 4 = 
if ((thisYear % 1 


00 != ©) || (thisYear % 400 === 0)) { 
dayCount[i] = 29; 
t 


BD 3. Save your changes to the file. 


Exploring the if else Statement 


The if statement runs a command or a command block only if the conditional 
expression returns the value true; it does nothing if the condition is false. On some 
occasions, you might want to choose between alternate command blocks so that one 
command block is run if the conditional expression is true, and a different command 
block is run if the expression is false. The general structure of an if else statement 
follows: 


if (condition) { 

commands if condition is true 
} else { 

commands if condition is false 
} 


If only a single command is run in response to the if statement, you can use the 
following abbreviated form: 


1£ (condition) command if condition is true 
else command if condition is false; 


The following example shows an if else statement that displays two possible alert 
boxes depending on whether the value of the day variable is Friday or not: 


if (day === "Friday") alert ("Thank goodness it's Friday") 
else alert ("Today is " + day); 
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To make it easier to 
interpret nested if 
statements, always indent 
your code, lining up all of 
the commands for one set 
of nested statements. 


To simplify code, keep 
your nesting of multiple 
if statements to three or 
less, if possible. For more 
conditions, use the case/ 
switch structure. 
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Like if statements, if else statements can be nested as in the following code, 
which chooses between three possible alert boxes: 


if (day === "Friday") alert("Thank goodness it's Friday") 
else { 

if (day === "Monday") alert ("Blue Monday") 

else alert ("Today is " + day); 


} 


Some programmers advocate always using curly braces even if the command block 
contains only a single command. This practice visually separates one else clause from 
another. Also, when reading through nested statements, it can be helpful to remember 
that an else clause usually pairs with the nearest preceding if statement. 


Using Multiple else if Statements 


For more complex scripts, you might need to choose from several alternatives. In these 
cases, you can specify multiple else clauses, each with its own if statement. This 

is not a new type of conditional structure, but rather a way of taking advantage of the 
syntax rules inherent in the if else statement. The general structure for choosing 
from several alternatives is 


if (condition1) { 


commands1 

} else if (condition2) { 
commands2 

} else if (condition3) { 
commands3 

} else { 


default commands 


} 


where condition 1, condition 2, condition 3, and so onare the different 
conditions to be tested. This construction should always include a final else clause 
that is run by default if none of the preceding conditional expressions is true. When 
a browser runs a series of statements like this one, it stops examining the remaining 
else clauses at the first true condition. The structure in the following example 
employs multiple else if conditions: 


if (day === "Friday") { 
alert ("Thank goodness it's Friday") ; 
} else if (day === "Monday") { 
alert ("Blue Monday") ; 
} else if (day === "Saturday") { 
alert ("Sleep in today") ; 
} else { 


alert ("Today is " + day); 


REFERENCE 
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Working with Conditional Statements 
¢ To test a single condition, use the construction 


if (condition) { 
commands 
} 


where condition is a Boolean expression and commands is a command block run if 
the conditional expression is true. 
¢ To test between two conditions, use the following construction: 


if (condition) { 

commands if condition is true 
} else { 

commands if not true 
} 


¢ To test multiple conditions, use the construction 


aie (Cleaielitesi@ral)) {f 


commands1 

} else if (condition2) { 
commands2 

} else if (condition3) { 
commands3 

} else { 


default commands 


} 


where condition 1, condition 2, condition 3, and so on are the differ- 
ent conditions to be tested. If no conditional expressions return the value true, the 
default command block is run. 


You now have all of the tools you need to complete the calendar app. The only 
remaining task involves writing out the table cells containing the calendar days so 
that they are organized into separate rows. You will complete the calendar app in the 
next section. 
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Exploring the switch Statement 


Another way to handle multiple conditions is with the switch statement—also known 
as the case statement—in which different commands are run based upon different 
possible values of a specified variable. The syntax of the switch statement is 


INSIGHT 


switch (expression) { 
case label1: commandsi1; break; 
case label2: commands2; break; 
case label3: commands3; break; 


default: default commands 


} 


where expression is an expression that returns a value; label1, labe12, and 

so on are possible values of that expression; commands1, commands2, and so on 
are the commands associated with each label; and default commands is the set 
of commands to be run if no label matches the value returned by expression. The 
following switch statement demonstrates how to display a different alert box based 
on the value of the day variable: 


switch (day) { 


case "Friday": alert ("Thank goodness it's Friday"); break; 
case "Monday": alert ("Blue Monday"); break; 
case "Saturday": alert("Sleep in today"); break; 


default: alert ("Today is " + day); 


} 


The break statement is optional and is used to halt the execution of the switch 
statement once a match has been found. For programs with multiple matching cases, 
you can omit the break statements and JavaScript will continue moving through the 
switch statements, running all matching commands. 

Because of its simplicity, the switch statement is often preferred over a long list of 
else if statements that can be confusing to read and to debug. 


Completing the Calendar App 


The last part of creating the calendar involves writing table cells for each day of the 
month. The completed calendar app must do the following: 


e Calculate the day of the week in which the month starts. 

e Write blank table cells for the days before the first day of the month. 

¢ Loop through the days of the current month, writing each date in a different table 
cell and starting a new table row on each Sunday. 


You will place all of these commands in a function named calDays(). The function 
will have a single parameter named calDate storing a Date object for the current date. 
You add this function to the Iht_calendar.js file. 
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To start the calDays() function: 
D 1. At the bottom of the lht_calendar.js file, insert the following function: 


/* Function to write table rows for each day of the month */ 
function calDays(calDate) { 
// Determine the starting day of the month 


// Write blank cells preceding the starting day 


// Write cells for each day of the month 


} 


Figure 10-21 highlights the initial code of the function, as well as comments 
to help explain the code that will be added. 


Figure 10-21 Inserting the calDays() function and comments 


/* Function to write table rows for each day of the month */ 
function calDays(calDate) { 
// Determine the starting day of the month 


// Write blank cells preceding the starting day 


// Write cells for each day of the month 


BD 2. Save your changes to the file. 


Setting the First Day of the Month 


To loop through all of the days of the month, you need to keep track of each day as its 
table cell is written into the calendar table. You will store this information in a Date 
object named day. The initial value of the day variable will be set to match the first day 
of the calendar month using the following expression: 


var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1); 


Note that the new Date () object constructor uses the four-digit year value and 
month value from the calDate parameter to set the year and month, and then sets the 
day value to 1 to match the first day of the month. For example, if the current date is 
August 12, 2021, the date stored in the day variable will be August 1, 2021; that is, no 
matter what current day is, the date stored in the day variable will be the first day for 
that month and year. 

Next, to determine the day of the week on which the month starts, you use the 
following getDay () method: 


var weekDay = day.getDay() ; 


Recall that the getDay () method returns an integer ranging from 0 (Sunday) to 6 
(Saturday). You add these two commands to the calDays() function now. 
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To create the day and weekDay variables: 


BD 1. Below the first comment in the calDays() function, insert the following 
commands: 


var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1); 
var weekDay = day.getDay(); 


Figure 10-22 highlights the newly added code. 


Figure 10-22 Calculating the start day of the month 


sets the first day 
of the month 


Function 


var day = new Date(calDate.getFullvYear(), calDate.getMonth(), 1); 
var weekDay = day.getDay(); 


determines the 
weekday on which 
the month begins 


BD 2. Save your changes to the file. 


Placing the First Day of the Month 


Before the first day of the month, the calendar table should show only empty table 
cells that represent the days from the previous month. The value of the weekDay 
variable indicates how many empty table cells you need to create. For example, if the 
value of the weekDay variable is 4, indicating that the month starts on a Thursday, you 
know that there are four blank table cells—corresponding to Sunday, Monday, Tuesday, 
and Wednesday—that need to be written at the start of the first table row. The following 
loop writes the HTML code for the empty table cells to start the table row: 

var htmlCode = "<tr>"; 

for (var i = 0; i < weekDay; i++) { 

htmlCode += "<td></tds"; 

} 
Note that if weekDay equals 0O—indicating that the month starts on a Sunday—then no 
blank table cells will be written because the value of the counter variable is never less 
than the value of the weekDay variable and thus, the command block in the for loop 
is completely skipped. 


To write the initial blank cells of the first table row: 
BD 1. Below the second comment line, insert the following for loop: 


var htmlCode = "<tr>"; 

for (var i = 0; i < weekDay; i++) { 
htmlCode += "<td></td>"; 

} 


Figure 10-23 highlights the code for the for loop. 
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Figure 10-23 Inserting blank cells for the days that precede the start of the month 


‘ Function to write table rows for each day of the month 
function calDays(calDate) { 
// Determine the starting day of the month 
inserts opening <tr> var day = new Date(calDate.getFullYear(), calDate.getMonth(), 1); 
tag for the initial var weekDay = day.getDay(); 
table row 
/ Write blank cells preceding the starting day 
ar htmlCode = "<tr>"5 
(inserts ablank table) for (var i = 0; i < weekDay; i++) { 
cell for each weekday ———7———html Code += "<td></td>"; 
prior to the first of the } 
month 
™ “ Write cells for each day of the month 
} 


BD 2. Save your changes to the file. 


Writing the Calendar Days 


Finally, you will write the table cells for each day of the month using the following 
for loop: 


var totalDays = daysInMonth(calDate) ; 
for (var i = 1; i <= totalDays; i++) { 


day.setDate(i); 
weekDay = day.getDay() ; 


if (weekDay === 0) htmlCode += "<tr>"; 
htmlCode += "<td class='calendar_dates'>" + i + "</td>"; 
if (weekDay === 6) htmlCode += "</tr>"; 


} 


The code starts by determining the total days in the month using the daysInMonth() 
function you created earlier. It then loops through those days, and each time through 
the loop it changes the day and weekDay variables to match the current day being 
written. If the day is a Sunday, a new table row is started; if the day is a Saturday, the 
current table row is ended. Each table cell displays the day number and belongs to 
the calendar_dates class, which allows it to be styled using the style rule from the 
Iht_calendar.css style sheet. 


To write the calendar days: 


DB 1. Below the last comment in the calDays() function, add the following 
commands: 


var totalDays = daysInMonth(calDate) ; 
for (var i = 1; i <= totalDays; i++) { 


day.setDate (i); 
weekDay = day.getDay(); 


ey =HTML 5 and CSS | Tutorial 10 Exploring Arrays, Loops, and Conditional Statements 


if (weekDay === 0) htmlCode += "<tr>"; 
htmlCode += "<td class='calendar dates'>" + i + "</td>"; 
if (weekDay === 6) htmlCode += "</tr>"; 


} 


return htmlCode; 


Figure 10-24 highlights the code to write the table cells for each day of the 
month. 


Figure 10-24 Writing the HTML code for the table row and cells 


calculates the total 
number of days in 
the current month 


ite ce h day ot the m 


var totalDays = daysInMonth(calDate) ; 


loops through the 
total number of days 


for (var i = 13 i <= totalDays; i++) { 
if the day is a Sunday, day.setDate(4) 5 
starts a new table row weekDay = day.getDay(); 


for each day, 
determines the 


weekday on 


which it falls 
a = (weekDay === 0) htmlCode += "<tr>"; 
— wee += "<td class='calendar_dates'>" + 7 + "</td>"; 
if (weekDay === 6) htmlCode += "</tr>"; 


creates a table cell for } 
each day, displaying if the day is a Saturday, 
the day number return htmlcode; ends the table row 

} 


returns the HTML code 

for the table row and cells 

Next, you call the calDays() function from within the createCalendar() function 
and view the results. 


DB 2. Scroll up to the createCalendar() function, and then insert the following 
statement directly above the command that writes the closing </table> tag. 


calendarHTML += calDays(calDate) ; 


Figure 10-25 highlights the code in the function. 


Figure 10-25 Calling the calDays() function 


Function to generate the calendar tal 
function createCalendar(calDate) { 
var calendarHTML = "<table id='calendar_table'>"3; 
calendarHTML += calCaption(calDate) ; 
calls the calDays function, calendarHTML += calWeekdayRow() ; 


which adds the HTML code for calendarHTML += calDays(calDate) ; 
the table row and cells that ~ : 
calendarHTML += "</table>"; 


display the days of the month 
ae 2 return calendarHTML; 
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BD 3. Save your changes to the file, and then reload the lht_sept.html file in your 
browser. As shown in Figure 10-26, the page should now display the monthly 
calendar for September 2021. 


Figure 10-26 Monthly calendar for September 2021 


We're not Gone with Broadway yet, as novel of Robert A. Heiniein's classic music provided By the Carson Quartet 
popular singer Toni Trindle provides a sence fiction story. Seating is limited, so please reserve your 
great evening of jazz standards in table for this popular series 

Stardust Memories and Ted Gilliam School's in session with our continuing 


presents his one-man show, The Future ts  “<ture series. Mary Dees presents the 


September 2021 


days from the preceding 
month are displayed as 
blank cells 


days from the next 
month are displayed 
as blank cells 


Trouble? If you do not see a calendar, you might have made a mistake in 
the code. Common mistakes include misspelling variable names, forgetting 
to close quoted text strings, inconsistently using uppercase and lowercase 
letters in variable names, and omitting closing braces in command blocks. 
Compare your code to the complete code of the calDays() function shown in 
Figures 10-23 and 10-24. 


Highlighting the Current Date 


Lewis likes the calendar’s appearance but mentions that the calendar should also highlight 
the current day: September 24, 2021. Recall that Lewis has created a special style rule for 
the current day, identified using the HTML id value “calendar_today”. Thus, to highlight 
that table cell, the calDays() function should test each day as it is being written; and if the 
date matches the calendar day, the function should write the table cell as 


<td class='calendar_dates!' id='calendar_today'>day</td> 


where day is the day number. Otherwise, the function should write the table cell 
without the id attribute as follows: 


<td class='calendar_dates'!>day</td> 


To determine the day number of the calendar day, you create the highlightDay 
variable, using the getDate () method to extract the day value from the calDate 
parameter. When the counter in the £or loop matches the value of this variable, the 
loop will write the table cell including the calendar_today id attribute. 


HTML 802 


Calculations such as the 
getDate() method that 
need to be performed 
once should always 

be placed outside the 
program loop to avoid 
unnecessarily repeating 
the same calculation each 
time through the loop. 


stores the current day 
in the highlightDay 
variable 


if the day is the 
highlight day, write a 
table cell with the id 
‘calendar_today’ 


otherwise write a 
table cell with no id 
value 


HTML 5 and CSS | Tutorial 10 Exploring Arrays, Loops, and Conditional Statements 


To highlight the current date in the calendar: 


BD 1. Return to the Iht_calendar,js file in your editor, and then scroll down to the 
calDays() function. 


» 2. 


In the Write cells for each day of the month section and directly above the 
for loop in that section, insert the following statement to calculate the day 
value of the current day: 


var highlightDay = calDate.getDate(); 


BD 3. Replace the statement that writes the value of the htmlCode variable in the 
£or loop with the following code: 


if (i === highlightDay) { 

htmlCode += "<td class='calendar dates' id='calendar today'>" 
+ i + "</td>"; 
} else { 


htmlCode += "<td class='calendar dates'>" + i + "</td>"; 
} 


Figure 10-27 highlights the newly added if statement in the function. 


Figure 10-27 Highlighting the current date in the calendar 


daysInMonth(calDate); 


var highlightDay = calDate. getDate(); 
° = totalDays; i++) { 


weekDay = day. 


‘ 


htmlCode 

i === highlightDay) { 

tmicode += "<td class="calendar_dates’ id='calendar_today'>" ¢ 4 + "</td>"; 
} else { 

tmiCode += "<td class='calendar_dates'>" + 1 + "</td>"; 


if ( 


weekDay === htmlCode «= " 


BD 4. Save your changes to the file, and then reload Iht_august.html in your 
browser. The table cell corresponding to September 24, 2021 should now be 
highlighted as shown in Figure 10-28. 
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Calendar with the current date highlighted 


September 2021 


current date 


Displaying Daily Events 


The final piece of your calendar app is to display the daily events in September. Lewis 
already has created an array of daily event text, part of which is shown in Figure 10-29. 


Figure 10-29 The dayEvent array 


The dayEvent array has 30 items to match the 30 days in September. Array items that 
match days on which no event is scheduled contain a blank text string, while daily 
events are written in the HTML code that will be inserted into the calendar table. To 
display this content, you create a link to the Iht_events.js file and then, within the 
calDays() function, you add an expression to write the contents of the dayEvent array 
into the individual table cells. 


To display the daily events: 


D 1. Return to the Iht_sept.html file in your text editor. Directly above the 
script element for the lht_calendar,js file, insert the following script 
element for the Iht_events.js file: 


<script src="lht events.js" defer></script> 


Figure 10-30 highlights the newly added code. 
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Figure 10-30 Linking to the Iht_events.js file 


<Link href="Lht_base.css" rel="stylesheet" /> 
<link href="lLht_layout.css" rel="stylesheet" /> 
links to the script <link href="lht_calendar.css" rel="stylesheet" /> 
file containing the <script src="lLht_events.js" defer></script> 
dayEvents array <script src="lLht_calendar.js" defer></script> 
</head> 


D 2. Close the lht_sept.html file, saving your changes. 


D 3. Return to the Iht_calendar,js file in your text editor, and then scroll down to 
the calDays() function. 


D 4. Within the if else statement conditions, change the expression + i + in 
two places to: 


+ i + dayEvent[i] + 


Figure 10-31 highlights the newly added code that displays the events on 
each day. 


Displaying events for each day of the month 


ekDay = htm] je + 
= highlightDay 


itmlCode + td t + 4 + dayEvent[i] + 


tmlcode += j ’ } rte " + 4 + dayEvent[i] + 


displays the event 
for the day 


BD 5. Save your changes to the file. 


D 6. Reload the Iht_sept.html file in your browser. Verify that the calendar now 
shows the daily events as displayed in Figure 10-32. 
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Figure 10-32 Final version of the September 2021 calendar 
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You complete your work on the app by modifying the code so that it shows the 
calendar for the current month. 


To display the calendar for the current month: 
BD 1. Return to the Iht_calendarjs file in your editor. 
BD 2. Change the statement setting the value of the thisDay variable to: 


var thisDay = new Date(); 


Figure 10-33 highlights the changed code in the file. 


Figure 10-33 Displaying a calendar for the current month and date 


Set the date displayed in the calendai 


var thisDay = new Date(); 


sets the thisDay variable to 


the current date and time 


BD 3. Close the file, saving your changes. 


D 4. Reload the Iht_sept.html file in your browser. Verify that the page shows 
the calendar for the current month and that the current date is highlighted 
within the calendar (the events listed in the calendar will still be based on the 
entries in the dayEvent array). 
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Managing Program Loops and Conditional 
Statements 


Although you are finished with the calendar app, you still should become familiar 
with some features of program loops and conditional statements for future work with 
these JavaScript structures. You examine three features in more detail—the break, 
continue, and label statements. 


Exploring the break Command 


Although you briefly saw how to use the break statement when creating a switch 
statement, the break statement can be used anywhere within program code. Its 
purpose is to terminate any program loop or conditional statement. When a break 
statement is encountered, control is passed to the statement immediately following 
it. It is most often used to exit a program loop before the stopping condition is met. 
For example, consider a loop that examines an array for the presence or absence of a 
particular value, such as a customer ID number. The code for the loop might look as 
follows: 


for (var i = 0; i< ids.length; i++) { 
if (ids[i] === "C-14281") { 
alert ("C-14281 is in the list"); 
} 


} 


What would happen if the ids array had tens of thousands of entries? It would be time 
consuming to keep examining the array once the C-14281 ID has been encountered. 
To address this, the following for loop breaks off when it encounters the ID value, 
keeping the browser from needlessly examining the rest of the array: 


for (var i = 0; i< ids.length; i++) { 
if (ids[i] === "C-14281") { 
alert ("C-14281 is in the list"); 
break; // stop processing the for loop 


Exploring the continue Command 


The continue statement is similar to the break statement except that instead of 
stopping the program loop altogether, the continue statement stops processing the 
commands in the current iteration of the loop and continues on to the next iteration. 
For example, your program might employ the following for loop to add the values 
from an array: 


var total = 0; 

for (var i = 0; i < data.length; i++) { 
total += datal[i]; 

} 
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Each time through the loop, the value of the current entry in the data array is added to 
the total variable. When the for loop is finished, the total variable is equal to the sum 
of the values in the data array. However, what would happen if this were a sparse array 
containing several empty entries? In that case, when a browser encountered a missing 
or null value, that value would be added to the total variable, resulting in a null total. 
One way to fix this problem would be to use the continue statement, jumping out 
of the current iteration if a missing or null value were encountered. The revised code 
would look like the following: 


var total = 0; 

for (var i = 0; i < data.length; i++) { 
if (data[i] === null) continue; // continue to next iteration 
total += datal[i]; 


Exploring Statement Labels 


Statement labels are used to identify statements in JavaScript code so that you can 
reference those lines elsewhere in a program. The syntax of the statement label is 


label: statements 


where label is the text of the label and statements are the statements identified by 
the label. You have already seen labels with the switch statement, but labels can also 
be used with other program loops and conditional statements to provide more control 
over how statements are processed. Labels often are used with break and continue 
statements in order to break off or continue a program loop. The syntax to reference a 
label in such cases is simply 


break label; 
or 
continue label; 


For example, the following for loop uses a statement label not only to jump out of 
the programming loop when the text string C-14281 is found but also to jump to the 
location in the script identified by the next_report label and to continue to process the 
statements found there: 


for (var i = 0; i< ids.length; i++) { 
if (ids[i] === "C-14281") { 
document.write ("C-14281 is in the list."); 
break next report; 


} 


next _report: 
JavaScript statements 


HTML 808 
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PROSKILLS 1 


Teamwork: The Danger of Spaghetti Code 


Spaghetti code is a pejorative programming term that refers to convoluted or poorly 
written code. One hallmark of spaghetti code is the frequent branching from one 
section of code to another, making it difficult to track the program line-by-line as it is 
executed. A change in one part of the program could lead to unpredictable changes 
in a completely different section of the code. 

Most developers discourage the use of break, continue, and label statements 
unless absolutely necessary. They can confuse a programmer trying to debug code in 
which a program loop can end before its stopping condition, or code in which state- 
ments are not processed in the order that they are written in a document. Almost all 
of the tasks you perform with these statements can also be performed by carefully 
setting up the conditions for program loops. 

Even with the best of intentions, spaghetti code can easily occur in environments in 
which the same code is maintained by several people or passed from one employee 
to another. Each programmer adds a particular feature that is needed today without 
adequately documenting the changes made to the code and without considering the 
impact of those changes on the larger program. 

To avoid or at least reduce the occurrence of spaghetti code, you should always 
document your code and develop a structure that is easy to follow. Break up tasks 
into smaller functions that are easier to manage and can be reused in other parts of 
your programs. Also, avoid global variables whenever possible because a change 
in the value of a global variable can have repercussions throughout the entire code. 
Instead, use local variables with their scope limited to small, compact functions. If a 
variable must be used elsewhere in your code, it should be passed as a parameter 
value with the meaning and purpose of the parameter well documented within the 
program. 

By practicing good coding techniques, you can make your programs more 
accessible to your colleagues and make it easier to pass your code on to your 
successors. 


Lewis is pleased with the final version of the calendar app. Because of the way the 


function and the style sheets were designed, he can use this utility in many other pages 
on the website with only a minimal amount of recoding in the documents. 
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a Session 10.3 Quick Check 


1. Which of the following displays an alert box with the message “Good 
Morning” if the value of the thisHour variable is less than 9? 
a. if (thisHour .le. 9) alert("Good Morning") ; 
b. if (thisHour le 9) alert ("Good Morning") ; 
c. if (thisHour < 9) alert("Good Morning") ; 
d. if (thisHour LE 9) alert ("Good Morning") ; 
2. Which expression extracts the day of the week value from a Date object 
variable named thisDate? 
a. thisDate.day() 
b. thisDate.getday () 
c. thisDate.getWeekday () 
d. thisDate.getDay () 


REVIEW 


3. In place of a command block, you can write a conditional expression using 
a(n): 
a. if statement 
b. conditional operator 
c. while statement 
d. continue statement 
4. In place of multiple if statements, you can handle multiple conditions with a: 
a. switch statement 
b. while statement 
c. function statement 
d. set Interval () function 
5. Which command can be used to break out of the current iteration in a for 
loop? 
a. stop 
b. break 
c. exit 
d. quit 
6. Which command forces a script to go to the next iteration of the current pro- 
gram loop? 
a. continue 
b. go 
Cc. exit 
d. quit 
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CODE 


Coding Challenge 1 


Data Files needed for this Coding Challenge: code10-1_txt.html, gallery10-1_txt.js, 
code10-1_styles.css, slide0.jpg - slide13.jpg 


You are working on a JavaScript app to create a gallery of slide images. To create the gallery, you will 


apply a for loop that loops through an array of images and captions to create the HTML code for the 
figure elements. Figure 10-34 shows a preview of the gallery. 


Coding Challenge 10-1 gallery preview 


International Space Station Images 


Source: NASA 


Do the following: 


Ile 


Open the code10-1_txt.html and gallery10-1_txt.js files from the html10 » code1 folder. Enter 
your name and the date in each document and save the files as code10-1.html and 
gallery10-1.js respectively. 


. Go to the code10-1.html file in your editor. Within the head section insert a script element 


connecting the page to the gallery10-1.js file. Add the defer attribute to the script element to 
defer the loading of the script until after the contents of the page loads. 


. Save your changes to the file and then go to the gallery10-1.js file in your editor. 


4. Below the code that creates and populates the captions array, declare the htmlCode variable, set- 


ting its initial value to an empty text string. 


. Create a for loop with a counter variable i that goes from 0 to 13 in increments of 1. Each time 


through the for loop, add the following code to the value of the htmlCode variable: 


<figure> 
<img alt='' src='slidei.jpg' /> 
<figcaption>caption i</figcaption> 
</figure> 


where i is the value of the counter variable and caption_i is the value from the captions array 
with index number /. 
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6. After the for loop, change the inner HTML of the document element by the ID "gallery" to the 
value of the htmlCode variable. 


7. Save your changes to the file and then load code10-1.html in your browser. Verify that the page 
displays the 14 images in the slide gallery. 


8. Submit the completed file to your instructor. 


Coding Challenge 2 


Data Files needed for this Coding Challenge: code10-2_txt.html, list10-2_txt.js, code10-2_styles.css 


In this Coding Challenge you will use JavaScript to write the contents of a table listing the top ranked 
movies on the IMDb website. The names of the movies, descriptions, scores, and links to pages 
describing the movies have been stored in arrays. You will use a for loop to write the individual 
rows of the table. Figure 10-35 shows a preview of the completed page. 


Coding Challenge 10-2 example page 


IMDb Top Movie List 


MOVIE DESCRIPTION SCORE 


CODE 


Two imprisoned men bond over a number of years, finding solace and eventual 
redemption through acts of common decency 


The aging patriarch of an organized crime dynasty transfers contro! of his clandestine 
empire to his reluctant son. 


When the menace known as the Joker emerges from his mysterious past, he wreaks 
havoc and chaos on the people of Gotham. The Dark Knight must accept one of the 
greatest psychological and physical tests of his ability to fight injustice 


The early life and career of Vito Corleone in 1920s New York City is portrayed, while his 
son, Michael, expands and tightens his grip on the family crime syndicate. 


Gandalf and Aragorn lead the World of Men against Sauron’s army to draw his gare 
from Frodo and Sam as they approach Mount Doom with the One Ring 


The lives of two mob hitmen, a boxer, a gangster’s wife, and a pair of diner bandits 
intertwine in four tales of violence and redemption. 


In German-occupied Poland during World War IL industrialist Oskar Schindler graduaily 
becomes concemed for his Jewish workforce after witnessing their persecution by the 
Nazis. 


A bounty hunting scam joins two men in an uneasy alliance against a third in a race to 
find a fortune in gold buried in a remote cemetery 


A jury holdout attempts to prevent a miscarriage of justice by forcing his colleagues to 
reconsider the avidence 


A thief who steals corporate secrets through the use of dream-sharing technology is 
given the inverse task of planting an idea into the mind of a CEO. 


Do the following: 


1. Open the code10-2_txt.html and list10-2_txt.js files from the html10 » code2 folder. Enter 
your name and the date in each document and save the files as code10-2.html and list10-2.js 
respectively. 

2. Go to the code10-2.html file in your editor. Within the head section insert a script element 
connecting the page to the list10-2.js file. Add the defer attribute to the script element. Save 
your changes to the file. 
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3. Go to the list10-2.js file in your editor. Directly below the code populating the links array, 
declare the htmlCode variable. Store within the variable the following text: 


<table> 
<thead> 
<tr> 
<th>Movie</th><th>Description</th><th>Score</th> 
</tr> 
</thead> 
<tbody> 


4. Create a for loop with a counter variable i that goes from 0 to 9. Each time through the for 
loop add the following text to the htmlCode variable: 


<Gis> 
<td><a href='links i'>titles_i</a><td> 
<td>summaries_ i</td> 
<td>ratings i</td> 

</tr> 


where i is the value of the counter variable, and links_i, titles i, summaries i, and 
ratings_i are the values from the links, titles, summaries, and ratings array with index 
number i. 


5. After the for loop add the following text to the htm!Code variable: 


</tbody> 
</table> 


6. Store the value of the htmlCode variable in the inner HTML of the element with the ID "list". 

7. Save your changes to the file and then load code10-2.html in your browser. Verify that the page 
displays the table describing the ten movies from the IMDb movie list. Also verify that when you 
click the links in the Movie column you are redirected to a page providing information about the 
selected movie. 

8. Submit the completed file to your instructor. 


Coding Challenge 3 


Data Files needed for this Coding Challenge: code10-3_txt.html, days10-3_txt.js, 
code10-3_styles.css, sunday.png - saturday.png 


CODE 


You can use the switch/case statement to apply different possible values to the same variable. 
Figure 10-36 shows a web page that displays different banner image on each day of the week. You 
will write the code to generate this page. 
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Figure 10-36 Coding Challenge 10-3 example page 


Day of the Week 


Tired Thursday 


Source: openclipart.org 


Do the following: 


ile 


10. 


Open the code10-3_txt.html and days10-3_txt.js files from the html10 » code3 folder. Enter 
your name and the date in each document and save the files as code10-3.html and days10-3.js 
respectively. 


. Go to the code10-3.html file in your editor. Within the head section insert a script element 


connecting the page to the days10-3 js file. Add the defer attribute to the script element. 
Save your changes to the file. 


. Go to the days10-3.js file in your editor. Below the initial comment section, create a variable 


named thisDay containing the date object for the current date. 


. Use the getDay () method to extract the day of the week from the thisDay variable, storing the 


value in the wDay variable. 


. Declare a variable named imgSrc setting its initial value to an empty text string. 


. Create a switch/case statement that tests values of the wDay variable from 0 to 6. If 


wDay equals 0, set imgSrc to the text string "sunday.png"; if wDay equals 1, set imgSrc to 
"monday.png", and so forth. 


. Store the text string <img src='imgsrc' alt='' /> in the htmlCode variable where 


imgsrc is the value of the imgSrc variable. 


. Store the value of the imgSrc variable in the inner HTML of the element with the ID "banner". 


. Save your changes to the file and then load code10-3.html in your browser. Verify that the page 


shows the banner image for the current day. 


Submit the completed file to your instructor. 
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Coding Challenge 4 


5 Data Files needed for this Coding Challenge: code10-4_txt.html, debug10-4_txt.js, 
aa code10-4 _styles.css 
Lu 
Q 


Figure 10-37 shows a page that contains monthly calendars for every month of the year. You’ve been 
given the files for this page but there are several errors that prevent the code from running correctly. 
You will analyze the code and correct the mistakes. 


Coding Challenge 10-4 example page 


Annual Calendar 
2021 
2 s&s 2 3 4 5 6 
8 910 OR RA 3s JE 7 1'@ $ BF 8910 HW 12 1 
13 14 15 16 17 18 19 10 1) 12 13 14 «15 16 oO 1) 12 «03 is 16 1415 16 17 18 19 20 
20 21 22 23 24 25 2% 7 18 19 2 21 22 23 17 18 19 2 28 22 23 21 22 23 24 25 26 27 
27 28 29 30 1 24 25 2% 27 28 24 25 26 27 28 29 30 28 29 30 
ce S @ Sa 3 
5 6 7 8 Oton 2 5 910 1) 12:13 43 67 8 9 
1213 14 1S 16 17 18 910 11 12:13 14 15 16 15 16 17 18 19 20 1112 13 146 «15 16 17 
19 20 21 22 23 286 2 16 17 18 19 20 21 22 2) 22 23 24 28 26 27 16 19 20 21 22 23 2% 
276 27 28 29 30 3) 73 24 25 26 27 28 29 2629 30 3 25 26 27 28 29 30 3} 
RA 8) £8! & #2 2 & 
6 9 10 11 t2 05 18 7 1 Wl 5 7 62 6 9 10 1) 12 15 14 
15 16 17 18 19 20 21 13 14 «15 «16 17 «18 «O18 10 tT) 82 «13 14 15 16 15 16 17 18 19 20 21 
23 26 25 2% 27 28 20.2) 22 23 24 25 26 7 18 19 20 21 22 23 22 23 26 25 2% 27 2b 
29 40 26 28 ww 31 24% 26 77 26 2 30 29 30 3) 


Do the following: 


1. Open the code10-4_txt.html and debug10-4_txt.js files from the html10 » code4 folder. 
Enter your name and the date in each document and save the files as code10-4.html and 
debug10-4.js respectively. 


2. Go to the code10-4.html file in your editor. Within the head section insert a script element 
connecting the page to the days10-4.js file. Add the defer attribute to the script element. 
Save your changes to the file. 


3. Go to the debug10-4.js file in your editor. 

4. Fix the syntax errors in the following locations to allow the code to run correctly (there are no 
logic errors in the code): 
a. The statement that declares the thisDay variable 
b. The statement that declares the monthName variable 
c. The for loop that calls the writeMonthTable() function 
d. The code that writes the value of the htmlCode variable into the element with ID "calendar" 
e. The three if statements found within the writeMonthTable() function 


5. Save your changes to the file. 


6. Open the code10-4.html file in your browser. When the page is free of errors, you should see a 
calendar for the current year with the current day highlighted on the page. 


7. Submit the completed file to your instructor. 
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Review Assignments 


Data Files needed for the Review Assignments: Iht_events_txt.html, Iht_table_txt.js, 3 CSS files, 
1 JS file, 2 PNG files 


Lewis wants you to write another script that shows a table of events at the Lyman Hall Theater over 
the next two weeks from the current date. He has already created three arrays for use with the script: 


¢ The eventDates array containing a list of dates and time at which theater events are 
scheduled 


e The eventDescriptions array containing the description of those events 


PRACTICE 


e The eventPrices array containing the admission prices of those events 


Lewis has already written the page content and provided style sheets for use with the page. Your job 
will be to write a script that selects the events that occur in the two-week window from the current date 
and display them in the web page. A preview of the page you will create is shown in Figure 10-38. 


Figure 10-38 Upcoming events at the Lyman Hall Theater 


The 


Lyman Hall Theater 


box office facilities directions contact 


/ he Theater 

At the [heater Uncomina Events 

Great shows are coming to the Lyman Hall Theater in the Date Evert Price 

vpcoming weeks. The Broadway Touring Company of Cabaret Fri Oct 02 2023 @ 7:30:00 Prt Have Soacesult, will Travel =| $22/$36/548 

arrives for four performances, featuring Tony-av "] : 

actress Kayla James. Tickets are limvted, so be sure to orde Sat Oct 02 2023 S 7:00:00 PH Cabaret $48, 964/553 

be oF by calling the LHT boxoffice Sun Oct 03-2023 © 21:00:00 AM | Classics Brunch #12 

Enjoy & stunning multimedia event with Edward Lee's visions Yue Oct OS 2023 © 7:00:00 FH Visions of Light and Oreams | §38/832 

{om and f Ths featuring so 0, and interactive ao ieee ~ > 24/33 

Gemonstrations Of the latest innovations in film and theater Wed Oct 06 2021 © 7:00.00 San Diego Blues $24/33 
The Oct 07 2021 @ 7:00:00 9M Cabaret $43/$64/838 

If music is More your passion, LHT welcomes the popula: 

group San Dir -s. Want an evening of laughs? Get your Fri Oct 08 2022 @ 7:00:00 Pre Cabaret $48/$64/$89 

tickets Now for Gerry Jones and his one-person show, Exit Sat Oct 09 2021 S 7:00:00 FH Cabaret $45) $64/588 

ee Sun Oct 10.2021 © 22:00:00 4M | Classics Brunch $12 

For an inexpensive night Out, be sure to check out LHT's 302 7:00:00 PM $s vient 2 

Classic Cinema. For » delicious Sunday brunch, join us for Mon Oct 33 1 © 700-00 Case a 83 

CiISsSics Bouncr Wed Oct 13 2021 © 8:00:00 OM Exit Stage Left $18/$28/$36 
Thy Oct 14 2021 © 8:00:00 PM Artomio Perez 532/948/964 


© Igor Borodin/Shutterstock.com 


Complete the following: 


1. Use your editor to open the Iht_events_txt.html and Iht_table_txt.js files from the html10 > 
review folder. Enter your name and the date in the comment section of each file, and save them 
as Iht_events.html and Iht_table.js respectively. 

2. Go to the Iht_events.html file in your editor. Directly above the closing </head> tag, insert 
script elements that link the page to the Iht_list.js and Iht_table.js files in that order. Defer the 
loading and running of both script files until after the page has loaded. 
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3. Scroll down the document and, directly after the closing </article> tag, insert a div element 
with the ID eventList. It is within this element that you will write the HTML code for the table of 
upcoming theater events. Close the file saving your changes. (Hint: Be sure to review this file and 
all the support files, noting especially the names of variables that you will be using in the code 
you create.) 

4. Go to the lht_table.js file in your editor. Below the comment section, declare a variable named 
thisDay containing the date October 1, 2021. You will use this date to test your script. 

5. Create a variable named tableHTML that will contain the HTML code of the events table. Add 
the text of the following HTML code to the initial value of the variable: 


<table id='eventTable'> 
<caption>Upcoming Events</caption> 
<tr><th>Date</th><th>Event</th><th>Price</th></tr> 


6. Lewis only wants the page to list events occurring within 14 days after the current date. Declare 
a variable named endDate that contains a Date object that is 14 days after the date stored in the 
thisDay variable. (Hint: Use the new Date () object constructor and insert a time value that is 
equal to thisDay.getTime() + 14*24*60*60*1000.) 

7. Create a for loop that loops through the length of the eventDates array. Use i as the counter 
variable. 

8. Within the for loop insert the following commands in a command block: 

a. Declare a variable named eventDate containing a Date object with the date stored in the i" 
entry in the eventDates array. 

b. Declare a variable named eventDay that stores the text of the eventDate date using the 
toDateString() method. 

c. Declare a variable named eventTime that stores the text of the eventDate time using the 
toLocaleTimeString() method. 


d. Insert an if statement that has a conditional expression that tests whether thisDay is < 
eventDate and eventDate < endDate. If so, the event falls within the two-week window that 
Lewis has requested and the script should add the following HTML code text to the value of 
the tableHTML variable. 


<tr> 
<td>eventDay @ eventTime</td> 
<td>description</td> 
<td>price</td> 

ei ee> 


where eventDay is the value of the eventDay variable, event Time is the value of the 
eventTime variable, description is the i* entry in the eventDescriptions array, and price 
is the it entry in the eventPrices array. 
9. After the for loop, add the text of the HTML code </table> to the value of the tableHTML 
variable. 
10. Insert the value of the tableHTML variable into the inner HTML of the page element with the ID 
eventList. 
11. Document your code in the script file using appropriate comments. 
12. Save your changes to the file, and then load the Iht_events.html file in your browser. Verify that 
the page shows theater events over a two-week period starting with Friday, October 1, 2021 and 
concluding with Thursday, October 14, 2021. 


Tutorial 10 Exploring Arrays, Loops, and Conditional Statements | HTML 5 and CSS HTML 817 


. Case Problem 1 


Data Files needed for this Case Problem: tc_cart_txt.html, tc_cart_txt.js, tc_order_txt.js, 2 CSS files, 
8 PNG files 


APPLY 


Trophy Case Sports Sarah Nordheim manages the website for Trophy Case Sports, a sports 
memorabilia store located in Beavercreek, Ohio. She has asked you to work on creating a script 
for the shopping cart page. The script should take information on the items that the customer has 
purchased and present it in table form, calculating the total cost of the order. A preview of the 
page you will create is shown in Figure 10-39. 


Figure 10-39 Trophy Case Sports shopping cart 


Shopping Cart 


1975 Green Bay Packers Football (signed), $149.93 1 $149.93 
Item 10582 


Tom Landry 1955 Football Card $89.96 1 $89.98 


(unsigned), Item 23015 ‘ma 
1916 Army-Navy Game, Framed Photo $334.93 1 $334.93 


(signed), item 41807 Proceed to Checkout 


Protective Card Sheets, Item 10041 $22.67 a $90.68 


Subtotal $665.52 


voyeg3r/openclipart; © Marie C Fields/Shutterstock; Sources: Courtesy of the Gerald R. Ford Presidential Museum; 
Vintagecardprices.com; Library of Congress Prints and Photographs Division; facebook.com 


Sarah has already designed the page layout. Your job will be to use JavaScript to enter the order infor- 
mation (this task will later be handled by a script running on the website) and to write a script that 
generates the HTML code for the shopping cart table. 
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Complete the following: 


the 


Il. 


12. 


Use your editor to open the tc_cart_txt.html, tc_cart_txt.js and tc_order_txt.js files from the 
html10 » casel folder. Enter your name and the date in the comment section of each file, and 
save them as tc_cart.html, tc_cart.js and tc_order.js respectively. 


. Go to the tc_cart.html file in your editor. Directly above the closing </head> tag, insert 


script elements to link the page to the tc_order.js and tc_cart.js files in that order. Defer the 
loading and running of both script files until after the page has loaded. 


. Scroll down the file and directly below the h1 heading titled “Shopping Cart” insert a div 


element with the ID cart. 


. Save your changes to the file and go to the tce_order.js file in your editor. 
. Within the tc_order.js file, you will create arrays containing information on a sample customer 


order. Create an array named item that will contain the ID numbers of the items purchased by the 
customer. Add the following four item numbers to the array: 10582, 23015, 41807, and 10041. 


. Create an array named itemDescription containing the following item descriptions: 


e 1975 Green Bay Packers Football (signed), Item 10582 

¢ Tom Landry 1955 Football Card (unsigned), Item 23015 

¢ 1916 Army-Navy Game, Framed Photo (signed), Item 41807 
e Protective Card Sheets, Item 10041 


. Create an array named itemPrice containing the following item prices: 149.93, 89.98, 334.93, 


and 22.67. 


. Create an array named itemQty containing the following quantities that the customer ordered of 


each item: 1, 1, 1, and 4. 


. Save your changes to the file, and then open the te_cart.js file in your editor. 
. In your script, you will calculate a running total of the cost of the order. Declare a variable 


named orderTotal and set its initial value to O. 


Declare a variable named cartHTML that will contain the HTML code for the contents of the 
shopping cart, which will be displayed as a table. Set its initial value to the text string: 


<table> 

eres 
<th>Item</th><th>Description</th><th>Price</th><th>Qty</th><th>Total</th> 
</tr> 


Create a for loop that loops through the entries in the item array. Each time through the loop, 
execute the commands described in Steps a through e. 


a. Add the following HTML code to the value of the cartHTML variable 


<tr> 
<td><img src='tc item.png' alt='item' /></td> 


where item is the current value from the item array. 


b. Add the following HTML code to the cartHTML variable to display the description, price, and 
quantity ordered of the item 


<td>description</td> 
<td>$price</td> 
<td>quantity</td> 


where description is the current value from the itemDescription array, price is the 
current value from the itemPrice array preceded by a $ symbol, and quantity is the current 
value from the itemQty array. 
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c. Declare a variable named itemCost equal to the price value multiplied by the quantity 
value for the current item. 

d. Add the following HTML code to the cartHTML variable to display the cost for the item(s) 
ordered, completing the table row 


<td>$cost</td></tr> 


where cost is the value of the itemCost variable, preceded by a $ symbol. 
e. Add the value of the itemCost variable to the orderTotal variable to keep a running total of the 
total cost of the customer order. 
13. After the for loop has completed, add the following HTML code to the value of the cartHTML 
variable, completing the shopping cart table 


<tr> 

<td colspan='4'>Subtotal</td> 
<td>$total</td> 

</tr> 

</table> 


where total is the value of the orderTotal variable, preceded by a $ symbol. 
14. Apply the cartHTML value to the inner HTML of the div element with the ID "cart". 
15. Document your script file with appropriate comments, and then save your work. 


16. Open the tc_cart.html file in your browser and verify that the page now shows the shopping cart 
data for the sample customer order. 


CREATE 


Case Problem 2 


Data Files needed for this Case Problem: vw_election_txt.html, vw_results_txt.js, 2 CSS files, 
1 JS file, 1 PNG file 


VoterWeb Pam Carls is a manager for the website Voter Web, which compiles voting totals and 
statistics from local and national elections. Pam has the results of recent congressional elections from 
eight districts in Minnesota stored as multidimensional arrays in a JavaScript file. Pam wants you to 
create a script displaying these results and calculating the vote percentage for each candidate within 
each race. A preview of the page is shown in Figure 10-40. 
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Figure 10-40 Election results at VoterWeb 


iP i =~ > 
Vatorall/ah oe 
+ ‘ate 
~- &« ®w we 
Minnesota Congressional Elections 
District 1 
Candidate Votes 
3] 192,211 
Troutman, Rachel (R) 142.164( 39.7%) 
‘Whitman, Gary (I) 22,494 3%) 
District 2 
42.1680 10.5%) 
District 3 
Candidate Votes 
he + ct ld 
teen, Fred (RU 22.33% 54.5%! 
‘Shapirs, Dougias (1) 22,217] 5.7%) 
District 4 
Candidate Votes 
Sweet, Alice (0) 216, 585( 59.9%) 
Growener, Stewart (R) RL70x 6.4) 
Rearéin, Samed! (1) 21,33 5.55) 
District 5 
Candidate Votes 
5 V 
Mungieterg. Lings (K) 100.744 25.5%! 
Ketrick, Rachel (1) 27,255{ 7.2%) 
District 6 
Condidate Votes 
feaiaes, Kevin (0) 374,944( 47.9%) 
Prands, Tresor (RD 179.2400 49.2%) 
Ingiessohn, Ray (1) 11.245 2.1% 
District 7 
Candidate Votes 
3] 197,791 y 
Siarnan, Naecy (A) 214,258{ 24.9%) 
Pope, Richard (1) 15,296 4.7%) 
District 8 
291.976( SL.7%) 
161,831( 45.2%) 
SAI 3.2%) 


© Courtesy Patrick Carey 


Complete the following: 


1. Use your editor to open the vw_election_txt.html and vw_results_txt.js files from the html10 > 
case2 folder. Enter your name and the date in the comment section of each file, and save them as 
vw_election.html and vw_results.js respectively. 

2. Go to the vw_election.html file in your editor. Directly above the closing </head> tag, insert 
script elements to link the page to the vw_congminn.js and vw_results.js files in that order. 
Defer the loading and running of both script files until after the page has loaded. 

3. Scroll down the file and, directly above the footer, insert an empty section element. You will 
write the HTML code of the election report in this element. Save your changes to the file. 


4. Open the vw_congminn.js file in your editor and study the contents. Note that the file contains 
the results of 8 congressional elections in Minnesota. The candidate information is stored in 
multidimensional arrays named candidate, party, and votes. Do not make any changes to 
this file. 

5. Go to the vw_results.js file in your editor. Declare a variable named reportHTML containing the 
following HTML text 


<hl>title</h1> 


where tite is the value of the raceTitle variable stored in the vw_congminn.js file. 
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6. Create a for loop that loops through the contents of the race array using i as the counter 

variable. Place the commands specified in Steps a through e within this program for loop: 

a. Create a variable named totalVotes that will store the total votes cast in each race. Set its 
initial value to 0. 

b. Calculate the total votes cast in the current race by applying the forEach() method to 
i*” index of the votes array using the calcSum() function as the callback function. 

c. Add the following HTML text to the value of the reportHTML variable to write the name of the 
current race in the program loop 


<table> 
<caption>race</caption> 
<tr><th>Candidate</th><th>Votes</th></tr> 


where race is the i" index of the race array. 

d. Call the candidateRows() function (you will create this function shortly) using the counter 
variable i and the totalVotes variable as parameter values. Add the value returned by this 
function to the value of the reportHTML variable. 

e. Add the text </table> to the value of the reportHTML variable. 

7. After the for loop has completed, write the value of the reportHTML variable into the 
innerHTML of the first (and only) section element in the document. 

8. Next, create the candidateRows() function. The purpose of this function is to write individual 
table rows for each candidate, showing the candidate’s name, party affiliation, vote total, 

and vote percentage. The candidateRows() function has two parameters named raceNum and 

totalVotes. Place the commands in Steps a through c within this function. 

a. Declare a local variable named rowHTML that will contain the HTML code for the table row. 
Set the initial value of this variable to an empty text string. 

Explore b. Create a for loop in which the counter variable j goes from 0 to 2 in steps of 

1 unit. Within the for loop do the following: 

i. Declare a variable named candidateName that retrieves the name of the current candidate 
and the current race. (Hint: Retrieve the candidate name from the multidimensional 
candidate array using the reference, candidate[raceNum] |j].) 

ii. Declare a variable named candidateParty that retrieves the party affiliation of the current 

candidate in the current race from the multidimensional party array. 
.Declare a variable named candidateVotes that retrieves the votes cast for the current 
candidate in the current race from the multidimensional votes array. 


iv. Declare a variable named candidatePercent equal to the value returned by the 
calcPercent() function, calculating the percentage of votes received by the current 
candidate in the loop. Use candidateVotes as the first parameter value and totalVotes as the 
second parameter value. 


v. Add the following HTML code to the value of the rowHTML variable 


<tr> 

<td>name (party) </td> 
<td>votes (percent) </td> 
</tr> 


where name is the value of candidateName, party is the value of candidateParty, votes 

is the value of candidateVotes, and percent is the value of candidatePercent. Apply the 
toLocaleString() method to votes in order to display the vote total with a thousands 
separator. Apply the toFixed(1) method to percent in order to display percentage values 
to 1 decimal place. 


c. Return the value of the rowHTML variable. 
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9. Save your changes to the file, and then load vw_election.html in your browser. Verify that the 
three candidate names, party affiliations, votes, and vote percentages are shown for each of the 
eight congressional races. 

10. Pam also wants the report to display the vote percentages as bar charts with the length of the 
bar corresponding to the percentage value. Return to the vw_results.js file in your editor. At the 
bottom of the file, create a function named createBar() with one parameter named partyType. 
Add the commands described in Steps a through b to the function: 

a. Declare a variable named barHTML and set its initial value to an empty text string. 
-» Explore b. Create a switch/case statement that tests the value of the partyType 

parameter. If partyType equal “D” set barHTML equal to: 

<td class='dem' ></td> 

If partyType equals “R” set barHTML equal to: 

<td class='rep'></td> 

Finally, if partyType equals “I” set barHTML to: 

<td class='ind' ></td> 

11. Return the value of barHTML. 

Next, add these empty data cells to the race results table, with one cell for every percentage 
point cast for the candidate. 

12. Scroll up to the candidateRows() function. Directly before the line that adds the HTML code 
</tr> to the value of the rowHTML variable, insert a for loop with a counter variable k that 
goes from 0 up to a value less than candidatePercent in increments of 1 unit. Each time through 
the loop call the createBar() function using candidateParty and candidatePercent as the parameter 
values. 

13. Add comments throughout the file with descriptive information about the variables and 
functions. 

14. Save your changes to the file, and then reload vw_election.html in your browser. Verify that each 
election table shows a bar chart with different the length of bars representing each candidate's 
vote percentage. 


APPENDIX A 


STARTING DATA FILES 


Color Names with = 
Color Values, and 
HTML Character 
Entities 


Both HTML and XHTML allow you to define colors using either 
color names or color values. HTML and XHTML support a list of 
16 basic color names. Most browsers also support an extended 
list of color names, which are listed in Table A-1 in this appendix, 
along with their RGB and hexadecimal values. 


Table A-2 in this appendix lists the extended character set for 

HTML, also known as the ISO Latin-1 Character Set. You can specify 
characters by name or by numeric value. For example, you can use 
either &reg; or &#174; to specify the registered trademark symbol, ®. 


There are no starting Data Files needed for this appendix. 


HTML A1 


HTML A2 


Table A-1: 


Color names and 
corresponding values 
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Color Name 


RGB Value 


Hexadecimal Value 


aliceblue 
antiquewhite 
aqua 
aquamarine 
azure 

beige 

bisque 

black 


blanchedalmond 


blue 
blueviolet 
brown 
burlywood 
cadetblue 
chartreuse 
chocolate 
coral 
cornflowerblue 
cornsilk 
crimson 

cyan 
darkblue 
darkcyan 
darkgoldenrod 
darkgray 
darkgreen 
darkkhaki 
darkmagenta 
darkolivegreen 
darkorange 
darkorchid 
darkred 
darksalmon 
darkseagreen 
darkslateblue 
darkslategray 
darkturquoise 
darkviolet 
deeppink 
deepskyblue 
dimgray 
dodgerblue 
firebrick 
floralwhite 
forestgreen 


fuchsia 


(240,248,255) 
(250,235,215) 
(0,255,255) 
(127,255,212) 
(240,255,255) 
(245,245,220) 
(255,228,196) 
(0,0,0) 
(255,235,205) 
(0,0,255) 
(138,43 ,226) 
(165,42,42) 
(222,184,135) 
(95,158,160) 
(127,255,0) 
(210,105,30) 
(255,127,80) 
(100,149,237) 
(255,248,220) 
(220,20,54) 
(0,255,255) 
(0,0,139) 
(0,139,139) 
(184,134,11) 
(169,169,169) 
(0,100,0) 
(189,183,107) 
(139,0,139) 
(85,107,47) 
(255,140,0) 
(153,50,204) 
(139,0,0) 
(233,150,122) 
(143,188,143) 
(72,61,139) 
(47,79,79) 
(0,206,209) 
(148,0,211) 
(255,20,147) 
(0,191,255) 
(105,105,105) 
(30,144,255) 
(178,34,34) 
(255,250,240) 
(34,139,34) 
(255,0,255) 


#FOF8FF 
#FAEBD7 
#OOFFFF 
#7FFFD4 
#FOFFFF 
#F5SF5DC 
#FFE4C4 
#000000 
#FFEBCD 
#OOOOFF 
#8A2BE2 
#A52A2A 
#DEB8 87 
#5F9EAO 
#7FFFOO 
#D2691E 
#FF7F50 
#6495ED 
#FFF8DC 
#DC1436 
#OOFFFF 
#00008B 
#008B8B 
#B8860B 
H#AQAIAI 
#006400 
#BDB76B 
#8B008B 
#556B2F 
#FF8CO0O 
#9932CC 
#8B0000 
#EQO67A 
#8FBC8F 
#483D8B 
#2F4F4F 
#00CED1 
#9400D3 
#FF1493 
#OOBFFF 
#696969 
#1E9OFF 
#B22222 
#FFFAFO 
#228B22 
#FFOOFF 


Table A-1 
(Continued): 


Color names and 
corresponding values 
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HTML A3 


Color Name 


RGB Value 


Hexadecimal Value 


gainsboro 
ghostwhite 
gold 
goldenrod 
gray 

green 
greenyellow 
honeydew 
hotpink 
indianred 
indigo 

ivory 

khaki 
avender 
avenderblush 
awngreen 
emonchiffon 
ightblue 
ightcoral 
ightcyan 
ightgoldenrodyellow 
ightgreen 
ightgrey 
ightpink 
ightsalmon 
ightseagreen 
ightskyblue 
ightslategray 
ightsteelblue 
ightyellow 
ime 


imegreen 


inen 

magenta 

maroon 
mediumaquamarine 
mediumblue 
mediumorchid 
mediumpurple 
mediumseagreen 
mediumslateblue 
mediumspringgreen 
mediumturquoise 
mediumvioletred 
midnightblue 
mintcream 


mistyrose 


220,220,220) 
248,248,255) 
255,215,0) 
218,165,32) 
128,128,128) 
0,128,0) 
173,255,47) 
240,255,240) 
255,105,180) 
205,92,92) 
75,0,130) 
255,255,240 
240,230,140 
230,230,250 
255,240,245 
124,252,0) 
255,250,205) 
173,216,230) 
240,128,128) 
224,255,255) 
250,250,210) 
) 
) 
) 
) 


) 
) 
) 
) 


( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 

( 
(144,238,144 
(211,211,211 
(255,182,193 
(255,160,122 
(32,178,170) 
(135,206,250 
(119,136,153 
(176,196,222 
(255,255,224 
(0,255,0) 
(50,205,50) 
(250,240,230) 
(255,0,255) 
(128,0,0) 
(102,205,170) 
(0,0,205) 
(186,85,211) 
(147,112,219) 
(60,179,113) 
(123,104,238) 
(0,250,154) 
(72,209,204) 
(199,21,133) 
(25,25,112) 
(245,255,250) 
(255,228,225) 


Seve LTSe a= 


#DCDCDC 
#F8FS8FF 
#FFD700 
#DAA520 
#808080 
#008000 
#ADFF2F 
#FOFFFO 
#FF69B4 
#CD5C5C 
#4B0082 
#FFFFFO 
#FOE68C 
#EGE6FA 
#FFFOFS5 
#7CFCOO 
#FFFACD 
#ADD8E6 
#F08080 
#EOFFFF 
#FAFAD2 
#90EE90 
#D3D3D3 
#FFB6C1 
#FFAO7A 
#20B2AA 
#87CEFA 
#778899 
#BOC4DE 
#FFFFEO 
#OOFFOO 
#32CD32 
#FAFOE6 
#FFOOFF 
#800000 
#66CDAA 
#0000CD 
#BA55D3 
#9370DB 
#3CB371 
#7B68EE 
#OOFA9A 
#48D1CC 
#C71585 
#191970 
#FSFFFA 
#FFE4E1 


HTML A4 


Table A-1 
(Continued): 


Color names and 
corresponding values 
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Color Name 


RGB Value 


Hexadecimal Value 


moccasin 
navajowhite 
navy 
oldlace 
olive 
olivedrab 
orange 
orangered 
orchid 
palegoldenrod 
palegreen 
paleturquoise 
palevioletred 
papayawhip 
peachpuff 
peru 

pink 

plum 
powderblue 
purple 

red 
rosybrown 
royalblue 
saddlebrown 
salmon 
sandybrown 
seagreen 
seashell 
sienna 

silver 
skyblue 
slateblue 
slategray 
snow 
springgreen 
steelblue 
tan 

teal 

thistle 
tomato 
turquoise 
violet 
wheat 

white 
whitesmoke 
yellow 


yellowgreen 


(255,228,181) 
(255,222,173) 
(0,0,128) 
(253,245,230) 
(128,128,0) 
(107,142,35) 
(255,165,0) 
(255,69,0) 
(218,112,214) 
(238,232,170) 
(152,251,152) 
(175,238,238) 
(219,112,147) 
(255,239,213) 
(255,218,185) 
(205,133,63) 
(255,192,203) 
(221,160,221) 
(176,224,230) 
(128,0,128) 
(255,0,0) 
(188,143,143) 
(65,105,0) 
(139,69,19) 
(250,128,114) 
(244,164,96) 
(46,139,87) 
(255,245,238) 
(160,82,45) 
(192,192,192) 
(135,206,235) 
(106,90,205) 
(112,128,144) 
(255,250,250) 
(0,255,127) 
(70,130,180) 
(210,180,140) 
(0,128,128) 
(216,191,216) 
(255,99,71) 
(64,224,208) 
(238,130,238 
(245,222,179 
(255,255,255 
(245,245,245 
(255,255,0) 
(154,205,50) 


) 
) 
) 
) 


#FFE4B5 
#FFDEAD 
#000080 
#FDFSE6 
#808000 
#6B8E23 
#FFA500 
#FF4500 
#DA70D6 
#EEESAA 
#98FB98 
#AFEEEE 
#DB7093 
#FFEFD5 
#FFDAB9 
#CD853F 
#FFCOCB 
#DDAODD 
#BOEOE6 
#808080 
#FFO000 
#BC8F8F 
#4169E1 
#8B4513 
#FA8072 
#F4A460 
#2E8B57 
#FFFSEE 
#A0522D 
#COCOCO 
#87CEEB 
#6A5ACD 
#708090 
#FFFAFA 
#OOFF7F 
#4682B4 
#D2B48C 
#008080 
#D8BFD8 
#FF6347 
#40E0DO 
#EE82EE 
#F5DEB3 
#FFFFFF 
#FSF5F5 
#FFFFOO 
#9ACD32 


Table A-2: 
HTML character entities 
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HTML A5 


Character Code Description 
&H#OI;: Tab 
&#10; Line feed 
&#32; Space 
| &#33; Exclamation mark 
” &H34- Double quotation mark 
# &#35; Pound sign 
$ &H36; Dollar sign 
% &H#37; Percent sign 
& &#38; Ampersand 
‘ &#39; Apostrophe 
( &#4O; Left parenthesis 
) &#HA1; Right parenthesis 
= &#42; Asterisk 
+ &#43; Plus sign 
; &H#A4: Comma 
- &#45; Hyphen 
&#AG; Period 
&H#A7: Forward slash 
0-9 &#48;-&#57; Numbers 0-9 
&#58; Colon 
: &H59- Semicolon 
< &#60; Less than sign 
= &#61; Equal sign 
> &H62: Greater than sign 
fe &#63; Question mark 
@ &H64- Commercial at sign 
A-Z &H#65;-&#90; Letters A-Z 
[ &#I1; Left square bracket 
\ &HI2; Back slash 
] &H#93- Right square bracket 
is &#I4; Caret 
_ &#9S;: Horizontal bar (underscore) 
&#96; Grave accent 
a-Z &H#97 ;-&#122; Letters a-z 
{ &#123; Left curly brace 
| &#124; Vertical bar 
} &#125; Right curly brace 
~ &#126; Tilde 
, &#130; Comma 
f &#131; Function sign (florin) 
” &#132; Double quotation mark 
&#133; Ellipsis 
lt &#134; Dagger 
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Table A-2 
(Continued): Character Code Code Name Description 
HTML character entities 5 

&#135; Double dagger 

. &#136; Circumflex 

So &#137; Permil 

S &#138; Capital S with hacek 

< &#139; Left single angle 

es &#140; Capital OE ligature 
&#141;-&#144; Unused 

: &#145; Single beginning quotation mark 

: &#146; Single ending quotation mark 

“ &#147; Double beginning quotation mark 

" &#148; Double ending quotation mark 

e &#149; Bullet 

- &#150; En dash 

— &#151; Em dash 

~ &#152; Tilde 

™ &#153; &trade; Trademark symbol 

§ &#154; Small s with hacek 

> &#155; Right single angle 

ce &#156; Lowercase oe ligature 

Y &#159; Capital Y with umlaut 
&#160; &nbsp; Non-breaking space 

i &#161; &iexcl; Inverted exclamation mark 

¢ &#162; &cent; Cent sign 

£ &#163; &pound; Pound sterling 

a &#164; &curren; General currency symbol 

¥ &#165; &yen; Yen sign 

| &#166; &brvbar; Broken vertical bar 

§ &#167; &sect; Section sign 

. &#168; &uml; Umlaut 

© &#169; &copy; Copyright symbol 

@ &#170; &ordf; Feminine ordinal 

« &#171; &laquo; Left angle quotation mark 

a &#172; &not; Not sign 

- &#173; &shy; Soft hyphen 

® &#174; &reg; Registered trademark 

Z &#175; &macr; Macron 

° &#176; &deg; Degree sign 

+ &#177; &plusmn; Plus/minus symbol 
&#178; &sup2; Superscript * 

° &H179; &sup3; Superscript ° 

. &#180; &acute; Acute accent 

vy &#181; &micro; Micro sign 


&#182; &para; Paragraph sign 
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Table A-2 
‘aaa Ba eae Character Code Code Name Description 
&#183; &middot; Middle dot 
¢ &#184; &cedil; Cedilla 
q &#185; &sup1; Superscript ' 
2 &#186; &ordm; Masculine ordinal 
» &#187; &raquo; Right angle quotation mark 
Ya &#188; &fract4; Fraction one-quarter 
V2 &#189; &frac12; Fraction one-half 
" &#190; &frac34; Fraction three-quarters 
é &#191; &iquest; Inverted question mark 
A &#192; &Agrave; Capital A, grave accent 
A &H#193; &Aacute; Capital A, acute accent 
A &H#194; &Acirc; Capital A, circumflex accent 
A &#195; &Atilde; Capital A, tilde 
A &#196; &Auml:; Capital A, umlaut 
A &#197; &Aring; Capital A, ring 
A &#198; &Aelig; Capital AE ligature 
Cc &#199; &Ccedil; Capital C, cedilla 
E &#200; &Egrave; Capital E, grave accent 
E &#201; &Eacute; Capital E, acute accent 
E &#202; &Ecirc; Capital E, circumflex accent 
E &#203; &Euml; Capital E, umlaut 
l &#204; &lgrave; Capital |, grave accent 
[ &#205; &lacute; Capital |, acute accent 
j &#206; &lcirc; Capital |, circumflex accent 
T &#207; &luml; Capital |, umlaut 
F &#208; &ETH; Capital ETH, Icelandic 
N &#209; &Ntilde; Capital N, tilde 
(e) &#210; &Ograve; Capital O, grave accent 
fe) &#211; &Oacute; Capital O, acute accent 
(e) &#212; &Ocirc; Capital O, circumflex accent 
fo) &#213; &Otilde; Capital O, tilde 
(e) &#214; &Ouml; Capital O, umlaut 
x &#215; &times; Multiplication sign 
7) &#216; &Oslash; Capital O, slash 
U &#217; &Ugrave; Capital U, grave accent 
U &#218; &Uacute; Capital U, acute accent 
U &#219; &Ucirc; Capital U, circumflex accent 
U &#220; &Uuml:; Capital U, umlaut 
Y &H#221; &Yacute; Capital Y, acute accent 
p &#222; &THORN; Capital THORN, Icelandic 
B &#223; &szlig; Small sz, ligature 
a &#224; &agrave; Small a, grave accent 


a &#225; &aacute; Small a, acute accent 


HTML A8& 


Table A-2 


(Continued): 
HTML character entities 


HTML 5 and CSS | Appendix A Color Names with Color Values, and HTML Character Entities 


Character Code Code Name Description 

a &H#226; &acirc; Small a, circumflex accent 
a &#227; &atilde; Small a, tilde 

a &#228; &auml; Small a, umlaut 

a &#229; &aring; Small a, ring 

ze &#230; &aelig; Small ae, ligature 

¢ &#231; &ccedil; Small c, cedilla 

é &#232; &egrave; Small e, grave accent 

é &#233; &eacute; Small e, acute accent 

é &#234; &ecirc; Small e, circumflex accent 
é &#235; &euml; Small e, umlaut 

i &#236; &igrave; Small i, grave accent 

i &#237; &iacute; Small i, acute accent 

il &#238; &icirc; Small i, circumflex accent 
i &#239; &iuml; Small i, umlaut 

fe) &#240; &eth; Small eth, Icelandic 

A &#241; &ntilde; Small n, tilde 

} &#242; &ograve; Small 0, grave accent 

fo) &#243; &oacute; Small 0, acute accent 

fe) &#244; &ocirc; Small 0, circumflex accent 
fe) &#245; &otilde; Small 0, tilde 

6 &#246; &ouml:; Small o, umlaut 

+ &#247; &divide; Division sign 

(a) &#248; &oslash; Small 0, slash 

u &#249; &ugrave; Small u, grave accent 

U &#250; &uacute; Small u, acute accent 

a &#251; &ucirc; Small u, circumflex accent 
u &#252; &uuml; Small u, umlaut 

y &#253; &yacute; Small y, acute accent 

b &#254; &thorn; Small thorn, Icelandic 

y &#255; &yuml; Small y, umlaut 


APPENDIX B 


STARTING DATA FILES 


HTML Elements 


_— 


and Attributes 


This appendix provides descriptions of the major elements and 
attributes of HTML. The elements and attributes represent the 
specifications of the W3C; therefore, they might not all be supported 
by the major browsers. Also, in some cases, an element or attribute is 
not part of the W3C specifications, but instead is an extension offered 
by a particular browser. Where this is the case, the element or attribute 
is listed with the supporting browser indicated in parentheses. 


Many elements and attributes have been deprecated by the 

W3C. Deprecated elements and attributes are supported by most 
browsers, but their use is discouraged. In addition, some elements 
and attributes have been marked as obsolete. The use of both 
deprecated and obsolete items is not recommended. However, while 
deprecated items are in danger of no longer being supported by the 
browser market, obsolete items will probably still be supported by the 
browser market for the foreseeable future. 


Finally, elements and attributes that are new with HTML 5 are 
indicated by (HTML 5) in the text. Note that some of these elements 
and attributes are not supported by all browsers and browser versions. 


The following data types are used throughout this appendix: 


char 
char code 
color 
date 


id 


° lang 


media 


integer 
mime-type 
mime-type list 


option! |option2| ... 


script 
styles 
text 

text list 
url 

value 
value list 


There are no starting Data Files needed for this appendix. 


A single text character 

A character encoding 

An HTML color name or value 

A date and time in the format: 
yyyy-mm-ddThh:mm:ss TIMEZONE 

An id value 

A language type 

A media type equal to all, aural, braille, 
handheld, print, projection, screen, tty, or tv 
An integer value 

A MIME data type, such as "text/html" 

A comma-separated list of mime-types 
The value is limited to the specified list of 
options, with the default in bold 

A script or a reference to a script 

A list of style declarations 

A text string 

A comma-separated list of text strings 
The URL for a web page or file 

A numeric value 

A comma-separated list of numeric values 


HTML B1 
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General Attributes 


Several attributes are common to many page elements. Rather than repeating this 
information each time it occurs, the following tables summarize these attributes. 


Core Attributes 
The following attributes apply to all page elements and are supported by most browser 
versions. 
Attribute Description 
class=" text" Specifies the class or group to which an element belongs 
contenteditable= Specifies whether the contents of the element are editable 
"text list" 
contextmenu="id" Specifies the value of the id attribute on the menu with which to associate 


the element as a context menu 


draggable="truelfalse" — Specifies whether the element is draggable 


dropzone= Specifies what types of content can be dropped on the element and which 

"copy|movellink" actions to take with content when it is dropped 

hidden="hidden" Specifies that the element is not yet, or is no longer, relevant and that the 
element should not be rendered 

id="text" Specifies a unique identifier to be associated with the element 

spellcheck="true|false" — Specifies whether the element represents an element whose contents are 
subject to spell checking and grammar checking 

style="styles" Defines an inline style for the element 

title="text" Provides an advisory title for the element 

Language Attributes 


The web is designed to be universal and has to be adaptable to languages other than 
English. Thus, another set of attributes provides language support. This set of attributes 
is not as widely supported by browsers as the core attributes are. As with the core 
attributes, they can be applied to most page elements. 


Attribute Description 


dir="Itr|rtl" Indicates the text direction as related to the lang attribute; a value of Itr displays text 
from left to right; a value of rtl displays text from right to left 
lang="lang" _ Identifies the language used in the page where lang is the language code name 
Form Attributes 


The following attributes can be applied to most form elements or to a web form itself, but 
not to other page elements. 


Attribute Description 


accesskey= "char" Indicates the keyboard character that can be pressed along with the 
accelerator key to access a form element 


disabled="disabled" Disables a form field for input 


tabindex="integer" Specifies a form element's position in a document's tabbing order 
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Event Attributes 


To make web pages more dynamic, HTML supports event attributes that identify scripts 
to be run in response to an event occurring within an element. For example, clicking a 
main heading with a mouse can cause a browser to run a program that hides or expands 
a table of contents. Each event attribute has the form 


onevent = "script" 


where event is the name of the event attribute and script is the name of the script or 
command to be run by the browser in response to the occurrence of the event within 
the element. 


Core Events 


The core event attributes are part of the specifications for HTML. They apply to almost all 
page elements. 


HTML B3 


Attribute Description 

onabort Loading of the element is aborted by the user. 

onclick The mouse button is clicked. 

oncontextmenu The user requested the context menu for the element. 
ondblclick The mouse button is double-clicked. 

onerror The element failed to load properly. 

onkeydown A key is pressed down. 

onkeypress A key is initially pressed. 

onkeyup A key is released. 

onload The element finishes loading. 

onmousedown The mouse button is pressed down. 

onmousemove The mouse pointer is moved within the element's boundaries. 
onmouseout The mouse pointer is moved out of the element's boundaries. 
onmouseover The mouse pointer hovers over the element. 

onmouseup The mouse button is released. 

onmousewheel The user rotates the mouse wheel. 

onreadystatechange — The element and its resources finish loading. 

onscroll The element or document window is being scrolled. 

onshow The user requests that the element be shown as a context menu. 
onsuspend The browser suspends retrieving data. 


Document Events 


The following list of event attributes applies not to individual elements within the page, 
but to the entire document as it is displayed within the browser window or frame. 


Attribute Description 


onafterprint The document has finished printing (IE only). 


onbeforeprint The document is about to be printed (IE only). 
onload The page is finished being loaded. 


onunload The page is finished unloading. 
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Form Events 


The following list of event attributes applies to either an entire web form or fields within 


a form. 
onblur The form field has lost the focus. 
onchange The value of the form field has been changed. 
onfocus The form field has received the focus. 


onformchange — The user made a change in the value of a form field in the form. 


onforminput The value of a control in the form changes. 
. oninput The value of an element changes. 
“oninvalid The form field fails to meet validity constraints. 
~ onreset The form has been reset. 
onselect Text content has been selected in the form field. 
~ onsubmit The form has been submitted for processing. 


Drag and Drop Events 


The following list of event attributes applies to all page elements and can be used to 
respond to the user action of dragging and dropping objects in the web page. 


ondrag The user continues to drag the element. 
ondragenter The user ends dragging the element, entering the element into a valid drop 
target. 
. ondragleave The user's drag operation leaves the element. - 
"ondragover The user continues a drag operation over the element. 
. ondragstart The user starts dragging the element. 
: ondrop 7 The user completes a drop operation over the element. 


Multimedia Events 


The following list of event attributes applies to embedded multimedia elements such as 
audio and video clips and is used to respond to events initiated during the loading or 
playback of those elements. 


oncanplay The browser can resume playback of the video or audio, but determines when 
the playback will have to stop for further buffering. 


oncanplaythrough The browser can resume playback of the video or audio, and determines the 
playback can play through without further buffering. 


. ondurationchange The DOM duration of the video or audio element changes. 


onemptied The video or audio element returns to the uninitialized state. 
onended The end of the video or audio is reached. 
onloadeddata The video or audio is at the current playback position for the first time. 
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Attribute Description 
onloadedmetadata The duration and dimensions of the video or audio element are determined. 
onloadstart The browser begins looking for media data in the video or audio element. 
onpause The video or audio is paused. 
onplay The video or audio playback is initiated. 
onplaying The video or audio playback starts. 
onprogress The browser fetches data for the video or audio. 
onratechange The video or audio data changes. 
onseeked A seek operation on the audio or video element ends. 
onseeking Seeking is initiated on the audio or video. 
onstalled An attempt to retrieve data for the video or audio is not forthcoming. 
ontimeupdate The current playback position of the video or audio element changes. 
onvolumechange _ The volume of the video or audio element changes. 
onwaiting Playback of the video or audio stops because the next frame is unavailable. 
HTML Elements and Attributes 
The following table contains an alphabetic listing of the elements and attributes supported 
by HTML. Some attributes are not listed in this table but instead, they are described in the 
general attributes tables presented in the previous section of this appendix. 
Element/Attribute Description 
<l-- text --> Inserts a comment into the document (comments are not displayed in the 
rendered page) 
<!doctype> Specifies the Document Type Definition for a document 
<a> </a> Marks the beginning and end of a link 
charset="text" Specifies the character encoding of the linked document (obsolete) 
coords="value list" Specifies the coordinates of a hotspot in a client-side image map; the value list 
depends on the shape of the hotspot: shape="rect" "left, right, top, bottom" 
shape="circle" "x_center, y_center, radius" shape="poly" "x1, y1, x2, y2, x3, 
y3, ..." (obsolete) 
href="url" Specifies the URL of the link 
hreflang="text" Specifies the language of the linked document 
name="text" Specifies a name for the enclosed text, allowing it to be a link target (obsolete) 
rel="text" Specifies the relationship between the current page and the link specified by 
the href attribute 
rev="text" Specifies the reverse relationship between the current page and the link 
specified by the href attribute (obsolete) 
shape="rect |circle| Specifies the shape of the hotspot (obsolete) 
polygon" 
title="text" Specifies the pop-up text for the link 
target="text" Specifies the target window or frame for the link 
type="mime-type" Specifies the data type of the linked document 
<abbr> </abbr> Marks abbreviated text 
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Element/Attribute 


Description 


<acronym> </acronym> 
<address> </address> 
<applet> </applet> 


align="align" 


alt="text" 


archive="url" 


code="url" 
codebase="url" 
datafld="text" 
datasrc="text" 
height="integer" 


hspace="integer" 


mayscript="mayscript" 


name="text" 


object="text" 


src="uri" 

vspace="integer" 

width="integer" 
<area /> 

alt="text" 


coords="value list" 


href="url" 
hreflang="lang" 
media="media" 


rel="text" 


nohref="nohref" 


shape="rect |circle| 


polygon" 
target="text" 
<article> </article> 


<aside> </aside> 


<audio> </audio> 


autoplay="autoplay" 


preload="none | 
metadata |auto" 


controls="controls" 


Marks acronym text (deprecated) 
Marks address text 
Embeds an applet into the browser (deprecated) 


Specifies the alignment of the applet with the surrounding text where align is 
absmiddle, absbottom, baseline, bottom, center, left, middle, right, texttop, 
or top 


Specifies alternate text for the applet (deprecated) 


Specifies the URL of an archive containing classes and other resources to be 
used with the applet (deprecated) 


Specifies the URL of the applet’s code/class (deprecated) 

Specifies the URL of all class files for the applet (deprecated) 

Specifies the data source that supplies bound data for use with the data source 
Specifies the ID or URL of the applet’s data source 

Specifies the height of the applet in pixels 

Specifies the horizontal space around the applet in pixels (deprecated) 
Permits access to the applet by programs embedded in the document 
Specifies the name assigned to the applet (deprecated) 


Specifies the name of the resource that contains a serialized representation of 
the applet (deprecated) 


Specifies an external URL reference to the applet 

Specifies the vertical space around the applet in pixels (deprecated) 
Specifies the width of the applet in pixels (deprecated) 

Marks an image map hotspot 


Specifies alternate text for the hotspot 


Specifies the coordinates of the hotspot; the value list depends on the shape of 
x_center, 


the hotspot: shape="rect" "left, right, top, bottom" shape="circle 
y_center, radius" shape="poly""x1, y1, x2, y2, x3, y3, ..." 


Specifies the URL of the document to which the hotspot points 
Language of the hyperlink destination 
The media for which the destination of the hyperlink was designed 


Specifies the relationship between the current page and the destination of 
the link 


Specifies that the hotspot does not point to a link 
Specifies the shape of the hotspot 


Specifies the target window or frame for the link 
Structural element marking a page article 


Structural element marking a sidebar that is tangentially related to the main 
page content 


Marks embedded audio content 
Automatically begins playback of the audio stream 


Specifies whether to preload data to the browser 


Specifies whether to display audio controls 
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Element/Attribute Description 
loop="loop" Specifies whether to automatically loop back to the beginning of the audio clip 
srea"ari" Provides the source of the audio clip 

<b> </b> Marks text offset from its surrounding content without conveying any extra 

emphasis or importance 

<base /> Specifies global reference information for the document 
href="url" Specifies the URL from which all relative links in the document are based 
target="text" Specifies the target window or frame for links in the document 

<basefont /> Specifies the font setting for the document text (deprecated) 
color="color" Specifies the text color (deprecated) 
face="text list" Specifies a list of fonts to be applied to the text (deprecated) 


size="integer" 


<bdi> </bdi> 
<bdo> </bdo> 
<big> </big> 


<blockquote> </blockquote> 
cite="url" 

<body> </body> 
alink="color" 
background="url" 
bgcolor="color" 
link="color" 
marginheight="integer" 
marginwidth="integer" 
text="color" 
vlink="color" 

<br /> 
clear="none|left | 
right |all" 

<button> </button> 
autofocus="autofocus" 
disabled="disabled" 
form="text" 
formaction="url1" 
formenctype="mime-type" 
formmethod="get |post" 


formnovalidate= 
"formnovalidate" 


formtarget="text" 


name="text" 


type="submit | reset | button" 


value="text" 


Specifies the size of the font range from 1 (smallest) to 7 (largest) (deprecated) 


Marks text that is isolated from its surroundings for the purposes of bidirectional 
text formatting 


Indicates that the enclosed text should be rendered with the direction specified 
by the dir attribute 


Increases the size of the enclosed text relative to the default font size 
(deprecated) 

Marks content as quoted from another source 

Provides the source URL of the quoted content 

Marks the page content to be rendered by the browser 

Specifies the color of activated links in the document (obsolete) 
Specifies the background image file used for the page (obsolete) 
Specifies the background color of the page (obsolete) 
Specifies the color of unvisited links (obsolete) 


Speci 


f 
f 
f 
Specifies the size of the margin above and below the page (obsolete) 
fies the size of the margin to the left and right of the page (obsolete) 
fi 


Specifies the color of page text (obsolete) 


Specifies the color of previously visited links (obsolete) 
Inserts a line break into the page 


Displays the line break only when the specified margin is clear (obsolete) 


Creates a form button 

Gives the button the focus when the page is loaded 

Disables the button 

Specifies the form to which the button belongs 

Specifies the URL to which the form data is sent 

Specifies the encoding of the form data before it is sent 

Specifies the HTTP method with which the form data is submitted 


Specifies that the form should not be validated during submission 


Provides a name for the target of the button 
Provides the name assigned to the form button 
Specifies the type of form button 


Provides the value associated with the form button 
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Element/Attribute 


Description 


<Ccanvas> </canvas> 


height="integer" 
width="integer" 
<caption> </caption> 


align="align" 


valign="top|bottom" 


<center> </center> 
<cite> </cite> 
<code> </code> 
<col> </col> 


align="align" 


char="char" 


charoff="integer" 


span="integer" 


valign="align" 


width="integer" 
<colgroup> </colgroup> 


align="align" 


char="char" 


charoff="integer" 


span="integer" 


valign="align" 


width="integer" 
<command> </command> 


checked="checked" 


disabled="disabled" 


icon="url" 
label="text" 


radiogroup="text" 


type="command | 
radio |checkbox" 


<datalist> </datalist> 


<dd> </dd> 


Marks a resolution-dependent bitmapped region that can be used for dynamic 
rendering of images, graphs, and games 


Height of canvas in pixels 
Width of canvas in pixels 
Creates a table caption 


Specifies the alignment of the caption where align is bottom, center, left, right, 
or top (deprecated) 


Specifies the vertical alignment of the caption 

Centers content horizontally on the page (obsolete) 

Marks citation text 

Marks text used for code samples 

Defines the settings for a column or group of columns (obsolete) 


Specifies the alignment of the content of the column(s) where align is left, right, 
or center 


Specifies a character in the column used to align column values (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the number of columns in the group 


Specifies the vertical alignment of the content in the column(s) where align is 
top, middle, bottom, or baseline 


Specifies the width of the column(s) in pixels (obsolete) 
Creates a container for a group of columns 


Specifies the alignment of the content of the column group where align is left, 
right, or center (obsolete) 


Specifies a character in the column used to align column group values 
(obsolete) 

Speci 
attrib 


ies the offset in pixels from the alignment character specified in the char 
te (obsolete) 


f 
u 

Specifies the number of columns in the group 
f 


Specifies the vertical alignment of the content in the column group where align 
is top, middle, bottom, or baseline (obsolete) 


Specifies the width of the columns in the group in pixels (obsolete) 
Defines a command button 

Selects the command 

Disables the command 

Provides the URL for the image that represents the command 
Specifies the text of the command button 


Specifies the name of the group of commands toggled when the command 
itself is toggled 


Specifies the type of command button 


Encloses a set of option elements that can act as a dropdown list 


Marks text as a definition within a definition list 
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Element/Attribute 


Description 


<del> </del> 


cite="url" 


datetime="date" 


<details> </details> 


open="open" 
<dfin> </dfn> 
<dir> </dir> 
compact="compact" 
<div> </div> 


align="left|center 
right | justify" 
datafld="text" 


dataformatas="html 
|plaintext |text" 


datasrc="url" 
<dl> </dl> 
compact="compact" 
<dt> </dt> 


nowrap="nowrap" 


<em> </em> 
<embed> </embed> 


align="align" 


height="integer" 
hspace="integer" 
name="text" 
Ssrc="ari" 
type="mime-type" 
vspace="integer" 
width="integer" 
<fieldset> </fieldset> 
disabled="disabled" 
form="id" 
name="text" 


<figure> </figure> 


<figcaption> </figcaption> 

<font> </font> 
color="color" 
face="text list" 


size="integer" 


Marks text as deleted from the document 


Provides the URL for the document that has additional information about the 
deleted text 


Specifies the date and time of the text deletion 


Represents a form control from which the user can obtain additional information 
or controls 


Specifies that the contents of the details element should be shown to the user 
Marks the defining instance of a term 

Contains a directory listing (deprecated) 

Permits use of compact rendering, if available (deprecated) 

Creates a generic block-level element 


Specifies the horizontal alignment of the content (obsolete) 


Indicates the column from a data source that supplies bound data for the block 
(IE only) 


Specifies the format of the data in the data source bound with the the button 
(IE only) 


Provides the URL or ID of the data source bound with the block (IE only) 
Encloses a definition list using the dd and dt elements 

Permits use of compact rendering, if available (obsolete) 

Marks a definition term in a definition list 


Specifies whether the content wraps using normal HTML line-wrapping 
conventions 


Marks emphasized text 
Defines external multimedia content or a plugin 


Specifies the alignment of the object with the surrounding content where align 
is bottom, left, right, or top (obsolete) 


Specifies the height of the object in pixels 

Specifies the horizontal space around the object in pixels (obsolete) 
Provides the name of the embedded object (obsolete) 

Provides the location of the file containing the object 

Specifies the mime-type of the embedded object 

Specifies the vertical space around the object in pixels (obsolete) 
Specifies the width of the object in pixels 

Places form fields in a common group 

Disables the fieldset 

The id of the form associated with the fieldset 

The name part of the name/value pair associated with this element 


A structural element that represents a group of media content that is 
self-contained along with a caption 


Represents the caption of a figure 

Formats the enclosed text (deprecated) 

Specifies the color of the enclosed text (deprecated) 
Specifies the font face(s) of the enclosed text (deprecated) 


Specifies the size of the enclosed text, with values ranging from 1 (smallest) to 
7 (largest); a value of +integer increases the font size relative to the font size 
specified in the basefont element (deprecated) 
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Element/Attribute 


<footer> </footer> 


Description 


A structural element that represents the footer of a section or page 


<form> </form> Encloses the contents of a web form 


accept="mime-type list" 
accept-charset= 

"char code" 
action="url" 


autocomplete="on|off£" 
enctype="mime-type" 


method="get | post" 


name="text" 


novalidate="novalidate" 


target="text" 


<frame> </frame> 


bordercolor="color" 


frameborder="1|0" 
longdesc="url" 
marginheight= 
"integer" 


marginwidth="integer" 


name="text" 


noresize="noresize" 


scrolling="auto 
yes|no" 


sre="uri" 


<frameset> </frameset> 


border="integer" 
bordercolor="color" 
cols="value list" 
frameborder="1|0" 


framespacing="integer" 


rows="value list" 


Lists mime-types that the server processing the form will handle (deprecated) 


Specifies the character encoding that the server processing the form will handle 


Provides the URL to which the form values are to be sent 


Enables automatic insertion of information in fields in which the user has 
previously entered data 


Specifies the mime-type of the data to be sent to the server for processing; the 
default is "application/x-www-form-urlencoded" 


Specifies the method of accessing the URL specified in the action attribute 
Specifies the name of the form 

Specifies that the form is not meant to be validated during submission 
Specifies the frame or window in which output from the form should appear 


Marks a single frame within a set of frames (deprecated) 


Specifies the color of the frame border 


Determines whether the frame border is visible (1) or invisible (0); Netscape also 
supports values of yes or no 


Provides the URL of a document containing a long description of the frame’s 
contents 


Specifies the space above and below the frame object and the frame’s borders, 
in pixels 
Specifies the space to the left and right of the frame object and the frame's 
borders, in pixels 

Specifies the name of the frame 


Prevents users from resizing the frame 


Specifies whether the browser will display a scroll bar with the frame 


Provides the URL of the document to be displayed in the frame 
Creates a collection of frames (deprecated) 


Specifies the thickness of the frame borders in the frameset in pixels (not part of 
the W3C specifications, but supported by most browsers) 


Specifies the color of the frame borders 


Arranges the frames in columns with the width of each column expressed either 
in pixels, as a percentage, or using an asterisk (to allow the browser to choose 
the width) 


Determines whether frame borders are visible (1) or invisible (0); (not part of 
the W3C specifications, but supported by most browsers) 


Specifies the amount of space between frames in pixels (IE only) 


Arranges the frames in rows with the height of each column expressed either 
in pixels, as a percentage, or using an asterisk (to allow the browser to choose 
the height) 
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Element/Attribute Description 
<hi> </hi> Marks the enclosed text as a heading, where i is an integer from 1 (the largest 
heading) to 6 (the smallest heading) 
align="align" Specifies the alignment of the heading text where align is left, center, right, 
or justify (obsolete) 
<head> </head> Encloses the document head, containing information about the document 
profile="url" Provides the location of metadata about the document 
<header> </header> Structural element that represents the header of a section or the page 
<hgroup> </hgroup> Structural element that groups content headings 
<hr /> Draws a horizontal line (rule) in the rendered page 
align="align" Specifies the horizontal alignment of the line where align is left, center, or right 
(obsolete) 
color="color" Specifies the color of the line (obsolete) 
noshade="noshade" Removes 3D shading from the line (obsolete) 
size="integer" Specifies the height of the line in pixels or as a percentage of the enclosing 
element's height (obsolete) 
width="integer" Specifies the width of the line in pixels or as a percentage of the enclosing 
element's width (obsolete) 
<html> </html> Encloses the entire content of the HTML document 
manifest="url" Provides the address of the document's application cache manifest 
xmlns="text" Specifies the namespace prefix for the document 
<i> </i> Represents a span of text offset from its surrounding content without conveying 
any extra importance or emphasis 
<iframe> </iframe> Creates an inline frame in the document 
align="align" Specifies the horizontal alignment of the frame with the surrounding content 
where align is bottom, left, middle, top, or right (obsolete) 
datafld="text" Indicates the column from a data source that supplies bound data for the inline 
frame (IE only) 
dataformatas="html | Specifies the format of the data in the data source bound with the inline frame 
plaintext |text" (IE only) 
datasrce="url" Provides the URL or ID of the data source bound with the inline frame (IE only) 
frameborder="1|0" Specifies whether to display a frame border (1) or not (0) (obsolete) 
height="integer" Specifies the height of the frame in pixels 
longdesc="uri" Indicates the document contains a long description of the frame's content 
(obsolete) 
marginheight="integer" Specifies the space above and below the frame object and the frame’s borders, 
in pixels (obsolete) 
marginwidth="integer" Specifies the space to the left and right of the frame object and the frame's 
borders, in pixels (obsolete) 
name="text" Specifies the name of the frame 
sandbox="allow-forms | Defines restrictions to the frame content 


allow-scripts | 
allow-top-navigation | 
allow-same-origin" 


seamless="seamless" Displays the inline frame as part of the document 
scrolling="auto | Determines whether the browser displays a scroll bar with the frame (obsolete) 
yes |no" 
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Element/Attribute Description 
sre="uri" Indicates the document displayed within the frame 
srcdoc="text" Provides the HTML code shown in the inline frame 
width="integer" Specifies the width of the frame in pixels 
<img> </img> Inserts an inline image into the document 
align="align" Specifies the alignment of the image with the surrounding content where align 
is left, right, top, text textop, middle, absmiddle, baseline, bottom, absbottom 
(obsolete) 
alt="text" Specifies alternate text to be displayed in place of the image 
border="integer" Specifies the width of the image border (obsolete) 
datafld="text" Names the column from a data source that supplies bound data for the image 
(IE only) 
dataformatas="html | Specifies the format of the data in the data source bound with the image 
plaintext |text" (IE only) 
datasrc="url" Provides the URL or ID of the data source bound with the image (IE only) 
dynsre="url" Provides the URL of a video or VRML file (IE and Opera only) 
height="integer" Specifies the height of the image in pixels 
hspace="integer" Specifies the horizontal space around the image in pixels (deprecated) 
ismap="ismap" Indicates that the image can be used as a server-side image map 
longdesc="url" Provides the URL of a document containing a long description of the image 
(obsolete) 
name="text" Specifies the image name (obsolete) 
src="url" Specifies the image source file 
usemap="url" Provides the location of a client-side image associated with the image (not 
well-supported when the URL points to an external file) 
vspace="integer" Specifies the vertical space around the image in pixels (obsolete) 
width="integer" Specifies the width of the image in pixels 
<input> </input> Marks an input field in a web form 
align="align" Specifies the alignment of the input field with the surrounding content where 


align is left, right, top, texttop, middle, absmiddle, baseline, bottom, or 
absbottom (obsolete) 


alt="text" Specifies alternate text for image buttons and image input fields 

checked="checked" Specifies that the input check box or input radio button is selected 

datafld="text" Indicates the column from a data source that supplies bound data for the 
input field (IE only) 

dataformatas="html | Specifies the format of the data in the data source bound with the input field 

plaintext |text" (IE only) 

datasrce="url" Provides the URL or ID of the data source bound with the input field (IE only) 

disabled="disabled" Disables the input control 

form="text" Specifies the form to which the button belongs 

formaction="url" Specifies the URL to which the form data is sent 

formenctype="mime-type" Specifies the encoding of the form data before it is sent 

formmethod="get |post" Specifies the HTTP method with which the form data is submitted 

formnovalidate= Specifies that the form should not be validated during submission 

"formnovalidate" 

formtarget="text" Provides a name for the target of the button 

height="integer" Specifies the height of the image input field in pixels 
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Element/Attribute Description 


ligt="2a" 
max="value" 


maxlength="integer" 


min="value" 
multiple="multiple" 
name="text" 
pattern="text" 
placeholder="text" 
readonly="readonly" 


size="integer" 


src="url" 
step="any| value" 


type="text" 


value="text" 


width="integer" 


<ins> </ins> 


cite="url" 


datetime="date" 


Specifies the id of a data list associated with the input field 
Specifies the maximum value of the field 


Specifies the maximum number of characters that can be inserted into a text 


input field 

Specifies the minimum value of the field 
Specifies that the user is allowed to specify more than one input value 
Specifies the name of the input field 


Specifies the required regular expression pattern of the input field value 


SSH OS 


Specifies placeholder text for the input field 


Prevents the value of the input field from being modified 


Specifies the number of characters that can be displayed at one time in an 
input text field 


Indicates the source file of an input image field 
Specifies the value granularity of the field value 


Specifies the input type where text is button, checkbox, color, date, datetime, 
datetime-local, email, file, hidden, image, month, number, password, radio, 
range, reset, search, submit, tel, text, time, url, or week 


Specifies the default value of the input field 
Specifies the width of an image input field in pixels 
Marks inserted text 


Provides the URL for the document that has additional information about the 
inserted text 


Specifies the date and time of the text insertion 


<kbd> </kbd> Marks keyboard-style text 


<keygen> </keygen> Defines a generate key within a form 


autofocus="autofocus" 


challenge="text" 
disabled="disabled" 
form="id" 
keytype="rsa" 


name="text" 


<label> </label> 


datafld="text" 


dataformatas="html | 
plaintext |text" 


datasrc="url" 
for="text" 


form="id" 


<legend> </legend> 


align="bottom|left 
|top|right" 


<li> </li> 


value="integer" 


Specifies that the element is to be given the focus when the form is loaded 
Provides the challenge string that is submitted along with the key 

Disables the element 

Specifies the id of the form associated with the element 

Specifies the type of key generated 

Specifies the name part of the name/value pair associated with the element 
Associates the enclosed content with a form field 


Indicates the column from a data source that supplies bound data for the label 
(IE only) 


Specifies the format of the data in the data source bound with the label (IE only) 


Provides the URL or ID of the data source bound with the label (IE only) 
Provides the ID of the field associated with the label 

Specifies the id of the form associated with the label 

Marks the enclosed text as a caption for a field set 


Specifies the alignment of the legend with the field set; Internet Explorer also 
supports the center option (deprecated) 


Marks an item in an ordered (ol), unordered (ul), menu (menu), or directory 


(dir) list 


Sets the value for the current list item in an ordered list; subsequent list items 
are numbered from that value 
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Element/Attribute 


Description 


<link /> 


charset="char code" 
href="url" 
hreflang="text" 
media="media" 


rel="text" 
rev="text" 


sizes="any|value" 
target="text" 
type="mime-type" 

<map> </map> 
name="text" 

<mark> </mark> 

<menu> </menu> 
compact="compact" 
label="text" 


type="context | list | 
toolbar" 


<meta /> 


charset="char code" 


content="text" 


http-equiv="text" 


name="text" 


scheme="text" 


<meter> </meter> 
high="value" 
low="value" 
max="value" 
min="value" 
optimum="value" 
value="value" 

<nav> </nav> 


<nobr> </nobr> 
<noembed> </noembed> 


<noframe> </noframe> 


<noscript> </noscript> 


Creates an element in the document head that establishes the relationship 
between the current document and external documents or objects 


Specifies the character encoding of the external document (obsolete) 
Provides the URL of the external document 

Indicates the language of the external document 

Indicates the media in which the external document is presented 


Specifies the relationship between the current page and the link specified by 
the href attribute 


Specifies the reverse relationship between the current page and the link 
specified by the href attribute (obsolete) 


Specifies the sizes of icons used for visual media 
Specifies the target window or frame for the link (obsolete) 
Specifies the mime-type of the external document 


Creates an element that contains client-side image map hotspots 


Specifies the name of the image map 

Defines marked text 

Represents a list of commands 

Reduces the space between menu items (obsolete) 
Defines a visible label for the menu 


Defines which type of list to display 


Creates an element in the document's head section that contains information 
and special instructions for processing the document 


Defines the character encoding for the document 
Provides information associated with the name or http-equiv attributes 


Provides instructions to the browser to request the server to perform different 
http operations 


Specifies the type of information specified in the content attribute 


Supplies additional information about the scheme used to interpret the content 
attribute (obsolete) 


Defines a measurement within a predefined range 
Defines the high value of the range 

Defines the low value of the range 

Defines the maximum value 

Defines the minimum value 

Defines the optimum value from the range 
Defines the meter’s value 

Structural element defining a navigation list 


Disables line wrapping for the enclosed content (not part of the W3C 
specifications, but supported by most browsers) 


Encloses alternate content for browsers that do not support the embed element 
not part of the W3C specifications, but supported by most browsers) 


Encloses alternate content for browsers that do not support frames (obsolete) 


Encloses alternate content for browsers that do not support client-side scripts 
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Element/Attribute 


Description 


<object> </object> 


archive="url" 


align="align" 


border="integer" 
classid="url" 


codebase="url" 


codetype="mime-type" 
data="url" 


datafld="text" 


dataformatas="html | 
plaintext |text" 


datasrce="url" 


declare="declare" 
form="id" 
height="integer" 
hspace="integer" 
name="text" 


standby="text" 


type="mime-type" 
vspace="integer" 
width="integer" 
<ol> </ol> 
reversed="reversed" 
start="integer" 
type="Ala|I|i|1" 
<optgroup> </optgroup> 
disabled="disabled" 
label="text" 
<option> </option> 
disabled="disabled" 
label="text" 
selected="selected" 
valué="text" 
<output> </output> 
name="text" 
form="id" 


for="text list" 


Places an embedded object (image, applet, sound clip, video clip, etc.) into 
the page 

Specifies the URL of an archive containing classes and other resources 
preloaded for use with the object (obsolete) 


Aligns the object with the surrounding content where align is absbottom, 
absmiddle, baseline, bottom, left, middle, right, texttop, or top (obsolete) 


Specifies the width of the border around the object (obsolete) 
Provides the URL of the object (obsolete) 


Specifies the base path used to resolve relative references within the 
embedded object (obsolete) 


Indicates the mime-type of the embedded object's code (obsolete) 
Provides the URL of the object's data file 


Identifies the column from a data source that supplies bound data for the 
embedded object (IE only) 


Specifies the format of the data in the data source bound with the embedded 
object (IE only) 


Provides the URL or ID of the data source bound with the embedded object 
(IE only) 


Declares the object without embedding it on the page (obsolete) 
Specifies the id of the form associated with the object 

Specifies the height of the object in pixels 

Specifies the horizontal space around the image in pixels (obsolete) 
Specifies the name of the embedded object 


Specifies the message displayed by the browser while loading the embedded 
object (obsolete) 


Indicates the mime-type of the embedded object 

Specifies the vertical space around the embedded object (obsolete) 
Specifies the width of the object in pixels 

Contains an ordered list of items 

Specifies that the list markers are to be displayed in descending order 


Specifies the starting value in the list 


Specifies the bullet type associated with the list items (deprecated) 
Contains a group of option elements in a selection field 

Disables the option group control 

Specifies the label for the option group 

Formats an option within a selection field 

Disables the option control 

Supplies the text label associated with the option 

Selects the option by default 

Specifies the value associated with the option 

Form control representing the result of a calculation 

Specifies the name part of the name/value pair associated with the field 
Specifies the id of the form associated with the field 


Lists the id references associated with the calculation 
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Element/Attribute 


Description 


<p> </p> 


align="align" 


<param> </param> 
name="text" 


type="mime-type" 


value="text" 


valuetype="data | 
ref |object" 


<pre> </pre> 


<progress> </progress> 
value="value" 
max="value" 

<q> </q> 
cite="url" 


<rp> </rp> 


<rt> </rt> 
<ruby> </ruby> 
<s> </s> 
<samp> </samp> 


<script> </script> 


async="async" 


charset="char code" 
defer="defer" 
language="text" 
srce="url" 
type="mime-type" 
<section> </section> 


<select> </select> 


autofocus="autofocus" 


datafld="text" 


dataformatas="html | 
plaintext |text" 


datasrc="url" 


disabled="disabled" 


form="id" 
multiple="multiple" 
name="text" 


size="integer" 


Marks the enclosed content as a paragraph 


Horizontally aligns the contents of the paragraph where align is left, center, 
right, or justify (obsolete) 


Marks parameter values sent to an object element or an applet element 
Specifies the parameter name 


Specifies the mime-type of the resource indicated by the value attribute 
(obsolete) 


Specifies the parameter value 


Specifies the data type of the value attribute (obsolete) 


Marks the enclosed text as preformatted text, retaining white space from the 
document 


Represents the progress of completion of a task 
Specifies how much of the task has been completed 
Specifies how much work the task requires in total 
Marks the enclosed text as a quotation 

Provides the source URL of the quoted content 


Used in ruby annotations to define what to show browsers that do not support 
the ruby element 


Defines explanation to ruby annotations 

Defines ruby annotations 

Marks the enclosed text as strikethrough text 

Marks the enclosed text as a sequence of literal characters 


Encloses client-side scripts within the document; this element can be placed 
within the head or the body element or it can refer to an external script file 


Specifies that the script should be executed asynchronously as soon as it 
becomes available 


Specifies the character encoding of the script 
Defers execution of the script 
Specifies the language of the script (obsolete) 


Provides the URL of an external script file 


Specifies the mime-type of the script 
Structural element representing a section of the document 
Creates a selection field (drop-down list box) in a web form 


Specifies that the browser should give focus to the selection field as soon as 
the page loads 


Identifies the column from a data source that supplies bound data for the 
selection field (IE only) 


Specifies the format of the data in the data source bound with the selection field 
(IE only) 


Provides the URL or ID of the data source bound with the selection field 
(IE only) 


Disables the selection field 

Provides the id of the form associated with the selection field 
Allows multiple sections from the field 

Specifies the selection field name 


Specifies the number of visible items in the selection list 
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Element/Attribute 


Description 


<small> </small> 

<source /> 
media="media" 
sre="uri" 
type="mime-type" 

<span> </span> 


datafld="text" 


dataformatas="html | 
plaintext |text" 


datasrce="url" 


<strong> </strong> 
<style> </style> 
media="media" 


scoped="scoped" 


type="mime-type" 
<sub> </sub> 
<summary> </summary> 
<sup> </sup> 
<table> </table> 


align="align" 


bgcolor="color" 
border="integer" 


cellpadding= 
"integer" 


cellspacing= 
"integer" 


datafld="text" 


dataformatas="html | 
plaintext |text" 


datapagesize= 
"integer" 


datasrc="url" 


frame="frame" 


rules="rules" 


summary="text" 


width="integer" 


Represents “final print" or “small print" in legal disclaimers and caveats 
Enables multiple media sources to be specified for audio and video elements 
Specifies the intended media type of the media source 

Specifies the location of the media source 

Specifies the MIME type of the media source 

Creates a generic inline element 


Identifies the column from a data source that supplies bound data for the inline 
element (IE only) 


Specifies the format of the data in the data source bound with the inline 
element (IE only) 


Provides the URL or ID of the data source bound with the inline element 
(IE only) 


Marks the enclosed text as strongly emphasized text 
Encloses global style declarations for the document 
Indicates the media of the enclosed style definitions 


Indicates that the specified style information is meant to apply only to the style 
element's parent element 


Specifies the mime-type of the style definitions 
Marks the enclosed text as subscript text 
Defines the header of a detail element 

Marks the enclosed text as superscript text 


Encloses the contents of a web table 


Aligns the table with the surrounding content where align is left, center, or right 
(obsolete) 


Specifies the background color of the table (obsolete) 
Specifies the width of the table border in pixels (obsolete) 


Specifies the space between the table data and the cell borders in pixels 
(obsolete) 


Specifies the space between table cells in pixels (obsolete) 


Indicates the column from a data source that supplies bound data for the 
table (IE only) 


Specifies the format of the data in the data source bound with the table 
(IE only) 


Sets the number of records displayed within the table (IE only) 


Provides the URL or ID of the data source bound with the table (IE only) 


Specifies the format of the borders around the table where frame is above, 
below, border, box, hsides, lhs, rhs, void, or vside (obsolete) 


Specifies the format of the table's internal borders or gridlines where rules is all, 
cols, groups, none, or rows (obsolete) 


Supplies a text summary of the table’s content 


Specifies the width of the table in pixels (obsolete) 
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Element/Attribute 
<tbody> </tbody> 


Description 
Encloses the content of the web table body 


align="align" 


char="char" 


charoff="integer" 


valign="align" 


<td> </td> 


abbr="text" 


align="align" 


bocolor="color" 


char="char" 


charoff="integer" 


colspan="integer" 
headers="text" 
height="integer" 
nowrap="nowrap" 
rowspan="integer" 


scope="col | colgroup 
| row| rowgroup" 


valign="align" 


width="integer" 


<textarea> </textarea> 


autofocus="autofocus" 


datafld="text" 


dataformatas="html | 
plaintext |text" 


datasrce="uri" 
cols="integer" 
disable="disable" 
form="id" 
maxlength="integer" 
name="text" 
placeholder="text" 
readonly="readonly" 
required="required" 
rows="integer" 


wrap="soft|hard" 


Specifies the alignment of the contents in the cells of the table body where 
align is left, center, right, justify, or char (obsolete) 


Specifies the character used for aligning the table body contents when the 
align attribute is set to "char" (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the vertical alignment of the contents in the cells of the table body 
where align is baseline, bottom, middle, or top (obsolete) 


Encloses the data of a table cell 
Supplies an abbreviated version of the contents of the table cell (obsolete) 


Specifies the horizontal alignment of the table cell data where align is left, 
center, or right (obsolete) 


Specifies the background color of the table cell (obsolete) 


Specifies the character used for aligning the table cell contents when the align 
attribute is set to "char" (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the number of columns the table cell spans 

Supplies a space-separated list of table headers associated with the table cell 
Specifies the height of the table cell in pixels (obsolete) 

Disables line-wrapping within the table cell (obsolete) 

Specifies the number of rows the table cell spans 


Specifies the scope of the table for which the cell provides data (obsolete) 


Specifies the vertical alignment of the contents of the table cell where align is 
top, middle, or bottom (obsolete) 


Specifies the width of the cell in pixels (obsolete) 
Marks the enclosed text as a text area input box in a web form 
Specifies that the text area is to receive the focus when the page is loaded 


Specifies the column from a data source that supplies bound data for the text 
area box (IE only) 


Specifies the format of the data in the data source bound with the text area box 
(IE only) 


Provides the URL or ID of the data source bound with the text area box (IE only) 
Specifies the width of the text area box in characters 

Disables the text area field 

Associates the text area with the form identified by id 

Specifies the maximum allowed value length for the text area 

Specifies the name of the text area box 

Provides a short hint intended to aid the user when entering data 

Specifies the value of the text area box, cannot be modified 


Indicates whether the text area is required for validation 


Specifies the number of visible rows in the text area box 


Specifies how text is wrapped within the text area box and how that text-wrapping 
information is sent to the server-side program 
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Element/Attribute 


Description 


<tfoot> </tfoot> 


align="align" 


char="char" 


charoff="integer" 


valign="align" 


<th> </th> 
abbr="text" 


align="align" 


axis="text list" 


bocolor="color" 


char="char" 


charoff="integer" 


colspan="integer" 
headers="text" 
height="integer" 
nowrap="nowrap" 
rowspan="integer" 


scope="col | colgroup | 
row|rowgroup" 


valign="align" 


width="integer" 
<thead> </thead> 


align="align" 


char="char" 


charoff="integer" 


valign="align" 


<time> </time> 


<title> </title> 


Encloses the content of the web table footer 


Specifies the alignment of the contents in the cells of the table footer where 
align is left, center, right, justify, or char (obsolete) 


Specifies the character used for aligning the table footer contents when the 
align attribute is set to "char" (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the vertical alignment of the contents in the cells of the table footer 
where align is baseline, bottom, middle, or top (obsolete) 


Encloses the data of a table header cell 
Supplies an abbreviated version of the contents of the table cell (obsolete) 


Specifies the horizontal alignment of the table cell data where align is left, 
center, or right (obsolete) 


Provides a list of table categories that can be mapped to a table hierarchy 
(obsolete) 


Specifies the background color of the table cell (obsolete) 


Specifies the character used for aligning the table cell contents when the align 
attribute is set to "char" (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the number of columns the table cell spans 

A space-separated list of table headers associated with the table cell 
Specifies the height of the table cell in pixels (obsolete) 

Disables line-wrapping within the table cell (obsolete) 

Specifies the number of rows the table cell spans 


Specifies the scope of the table for which the cell provides data 


Specifies the vertical alignment of the contents of the table cell where align is 
top, middle, or bottom (obsolete) 


Specifies the width of the cell in pixels (obsolete) 
Encloses the content of the web table header 


Specifies the alignment of the contents in the cells of the table header where 
align is left, center, right, justify, or char (obsolete) 


Specifies the character used for aligning the table header contents when the 
align attribute is set to "char" (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the vertical alignment of the contents in the cells of the table header 
where align is baseline, bottom, middle, or top (obsolete) 


Represents a date and/or time 


Specifies the title of the document, placed in the head section of the document 
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Element/Attribute 


Description 


<tr> </tr> 


align="align" 


char="char" 


charoff="integer" 


valign="align" 


<track> </track> 


default="default" 


kind="kind" 


label="text" 
srca"uril 
srclang="lang" 

<tt> </tt> 

<u> </u> 

<ul> </ul> 
compact="compact" 


type="disc | square | 
circle" 


<var> </var> 
<video> </video> 


audio="text" 


autoplay="autoplay" 


controls="controls" 


height="value" 
loop="loop" 


preload="auto| 
metadata|none" 


poster="url" 
width="value" 
<wbr /> 


<xml> </xml> 


ns="url" 
prefix="text" 
srce="url" 


<xmp> </xmp> 


Encloses the content of a row within a web table 


Specifies the horizontal alignment of the data in the row’s cells where align is 
left, center, or right (obsolete) 


Specifies the character used for aligning the table row contents when the align 
attribute is set to "char" (obsolete) 


Specifies the offset in pixels from the alignment character specified in the char 
attribute (obsolete) 


Specifies the vertical alignment of the contents of the table row where align is 
baseline, bottom, middle, or top (obsolete) 


Enables supplementary media tracks such as subtitles and captions 


Enables the track if the user's preferences do not indicate that another track 
would be more appropriate 


Specifies the kind of track, where kind is subtitles, captions, descriptions, 
chapters, or metadata 


Provides a user-readable title for the track 

Provides the address of the track 

Provides the language of the track 

Marks the enclosed text as teletype or monospaced text (deprecated) 
Marks the enclosed text as underlined text (deprecated) 

Contains an unordered list of items 

Reduces the space between unordered list items (obsolete) 


Specifies the bullet type associated with the list items (obsolete) 


Marks the enclosed text as containing a variable name 
Defines an embedded video clip 
Defines the default audio state; currently only "muted" is supported 


Specifies that the video should begin playing automatically when the page is 
loaded 


Instructs the browser to display the video controls 
Provides the height of the video clip in pixels 
Instructs the browser to loop the clip back to the beginning 


Indicates whether to preload the video clip data 


Specifies the location of an image file to act as a poster for the video clip 
Provides the width of the video clip in pixels 
Indicates a line-break opportunity 


Encloses XML content (also referred to as a data island) or references an 
external XML document (IE only) 


Provides the URL of the XML data island (IE only) 
Specifies the namespace prefix of the XML content (IE only) 
Provides the URL of an external XML document (IE only) 


Marks the enclosed text as preformatted text, preserving the white space of the 
source document; replaced by the pre element (deprecated) 


APPENDIX ( 


Cascading Styles £& 
and Selectors “ 


This appendix describes the selectors, units, and attributes 
supported by Cascading Style Sheets (CSS). Note that not all CSS 
features are supported by all browsers and all browser versions, 
so you should always check your code against different browsers 
and browser versions to ensure that your page is being rendered 
correctly. Also, many CSS styles are still in the draft stage and will 
undergo continuing revisions and additions. Additional informa- 
tion about CSS can be found at the World Wide Web Consortium 
website at www.w3.org. 


STARTING DATA FILES 
There are no starting Data Files needed for this appendix. 
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Selectors 


The general form of a style declaration is: 
selector {attributel:valuel; attribute2:value2; ...} 


where selector is the selection of elements within the document to which the style will 
be applied; attribute7, attribute2, and so on are the different style attributes; and value/, 
value2, and so on are values associated with those styles. Table C-1 shows some of the 
different forms that a selector can take. 


Table C-1: 
CSS selectors Selector Matches 
* All elements in the document 
e An element, e, in the document 
el, e2, e3,.. A group of elements, e7, e2, e3, in the document 
el e2 An element, e2, nested within the parent element, e7 
el > e2 An element, e2, that is a child of the parent element, e7 
el+e2 An element, e2, that is adjacent to element, e7 
el.class An element, e7, belonging to the class class 
-class Any element belonging to the class class 
#id An element with the id value id 
att] The element contains the att attribute 
att="val"] The element's att attribute equals "val" 
att~="val" The element's att attribute value is a space-separated list of "words," one of 
which is exactly "val" 
att|="val" The element's att attribute value is a hyphen-separated list of "words" beginning 
with "val" 
att*="val" The element's att attribute begins with "val" 
att$="val" The element's att attribute ends with "val" 
att*="val" The element's att attribute contains the value "val" 
ns|att] References all att attributes in the ns namespace 
Pseudo-Elements and Pseudo-Classes 
Pseudo-elements are elements that do not exist in HTML code but whose attributes can 
be set with CSS. Table C-2 lists CSS pseudo-elements. 
Table C-2: 
Pseudo-elements — Pseudo-Element Matches 


e::after {content: "text"} Text content, text, that is inserted at the end of an element, e 


e::before {content: "text"} — Text content, text, that is inserted at the beginning of an 


element, e 
e::first-letter The first letter in the element e 
e::first-line The first line in the element e 
::selection A part of the document that has been highlighted by the 


user 
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Pseudo-classes are classes of HTML elements that define the condition or state of the 
element in the web page. Table C-3 lists CSS pseudo-classes. 


Table C-3: 
Pseudo-classes Pseudo-Class Matches 

:canvas The rendering canvas of the document 

:first The first printed page of the document (used only with print styles created 
with the @print rule) 

:last The last printed page of the document (used only with print styles created 
with the @print rule) 

:left The left side of a two-sided printout (used only with print styles created 
with the @print rule) 

:right The right side of a two-sided printout (used only with print styles 
created with the @print rule) 

: root The root element of the document 

e:active The element, e, that is being activated by the user (usually applies only 
to hyperlinks) 

e:checked The checkbox or radio button, e, that has been checked 

e:disabled The element, e, that has been disabled in the document 

e:empty The element, e, that has no children 

e:enabled The element, e, that has been enabled in the document 

e:first-child The element, e, which is the first child of its parent element 

e:first-node The first occurrence of the element, e, in the document tree 

e:first-of-type The first element of type e 

e: focus The element, e, that has received the focus of the cursor 

e:hover The mouse pointer is hovering over the element, e 

e: lang (text) Sets the language, text, associated with the element, e 

e:last-child The element, e, that is the last child of its parent element 

e:last-of-type The last element of type e 

e: link The element, e, has not been visited yet by the user (applies only to 
hyperlinks) 

e:not Negates the selector rule for the element, e, applying the style to all e 
elements that do not match the selector rules 

e:nth-child(n) Matches n* child of the element, e; n can also be the keywords odd 
or even 

e:nth-last-child(n) Matches n* child of the element, e, counting up from the last child; n 


can also be the keywords odd or even 
e:nth-of -type (n) Matches n' element of type e; n can also be the keywords odd or even 


e:nth-last-of-type(n) Matches n“* element of type e, counting up from the last child; n can 
also be the keywords odd or even 


e:only-child Matches element e only if it is the only child of its parent 

e:only-of-type Matches element e only if it is the only element of its type nested within 
its parent 

e:target Matches an element, e, that’s the target of the identifier in the 


document's URL 


e:visited The element, e, has been already visited by the user (to only the 
hyperlinks) 


NOY =HTML 5 and CSS | Appendix C Cascading Styles and Selectors 


@ Rules 


CSS supports different @ rules designed to run commands within a style sheet. These 
commands can be used to import other styles, download font definitions, or define the 
format of printed output, as shown in Table C-4. 


Table C-4: 
@ rule commands — @ Rule Description 
@charset "encoding" Defines the character set encoding used in the style sheet (this 
must be the very first line in the style sheet document) 
@font-face {font Defines custom fonts that are available for automatic download 
descriptors} when needed 
@import url(url) media Imports an external style sheet document into the current style 
sheet, where url is the location of the external stylesheet and media 
is a comma-separated list of media types (optional) 
@media media {style Defines the media for the styles in the style declaration block, 
declaration} where media is a comma-separated list of media types 
@namespace prefix url(url) Defines the namespace used by selectors in the style sheet, where 
prefix is the local namespace prefix (optional) and url is the unique 
namespace identifier; the @namespace rule must come before all 
CSS selectors 
@page label pseudo-class Defines the properties of a printed page, where label is a label 
{styles} given to the page (optional), pseudo-class is one of the CSS 
pseudo-classes designed for printed pages, and styles are the 
styles associated with the page 
Miscellaneous Syntax 
The syntax elements in Table C-5 do not fit into the previous categories but are useful in 
constructing CSS style sheets. 
Table C-5: 
Miscellaneous syntax Item Description 
elements 


style !important Places high importance on the preceding style, overriding the usual rules for 
inheritance and cascading 


/* comment */ Attaches a comment to the style sheet 
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Units 


Many style attribute values use units of measurement to indicate color, length, angles, 
time, and frequencies. Table C—6 describes the measuring units used in CSS. 


Table C-6: 
CSS units of nit Description 
measurement 5 
ema Color Units of Color 
currentColor The computed value of the color property 
flavor An accent color chosen by the user to customize the user interface 
of the browser 
name A color name; all browsers recognize 16 base color names: aqua, 
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, 
red, silver, teal, white, and yellow 
#rrggbb A hexadecimal color value, where rr is the red value, gg is the green 
value, and bb is the blue value 
#rgb A compressed hexadecimal value, where the r, g, and b values are 


hsl(hue, sat, light) 


hsla(hue, sat, light, 
alpha) 


rgb(red, green, blue) 


rgb(red%, green%, blues) 


rgba(red, green, blue, 


doubled so that, for example, #A2F = #AA22FF 


Color value based on hue, saturation, and lightness, where hue is the 
degree measure on the color wheel ranging from 0° (red) up to 360°, 
sat is the saturation range from 0% to 100%, and light is the lightness 
range from 0% to 100% 


Semi-transparent color based on the HSL model with alpha 
representing the opacity of the color ranging from 0 (transparent) 
up to 1 (completely opaque) 

The decimal color value, where red is the red value, green is the 
green value, and blue is the blue value 


The color value percentage, where red% is the percent of maximum 
red, green% is the percent of maximum green, and blue% is the 
percent of maximum blue 


Semi-transparent color based on the RGB model with alpha 


alpha) representing the opacity of the color ranging from 0 (transparent) 
up to 1 (completely opaque) 

Length Units of Length 

auto Keyword that allows the browser to automatically determine the size 
of the length 

ch Width of the “0” glyph found in the font 

em A relative unit indicating the width and the height of the capital “M” 
character for the browser's default font 

ex A relative unit indicating the height of the small “x” character for the 
browser's default font 

px A pixel, representing the smallest unit of length on the output device 

in An inch 

cm A centimeter 

mm A millimeter 

pt A point, approximately 1/72 inch 

pe A pica, approximately 1/12 inch 

% A percent of the width or height of the parent element 

rem A relative unit basing its size relative to the size in the root (html) 
element 

fr 


A fractional unit that expands or contacts the size of grid tracks 
based on the available space within the grid 
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Unit Description 

xx-small Keyword representing an extremely small font size 
x-small Keyword representing a very small font size 
small Keyword representing a small font size 

vw A percentage of the viewport width 

vh A percentage of the viewport height 

vmin The smaller value between vw and vh 
medium Keyword representing a medium-sized font 
large Keyword representing a large font 
x-large Keyword representing a very large font 
xx-large Keyword representing an extremely large font 
Angle Units of Angles 

deg The angle in degrees 

grad The angle in gradients 

rad The angle in radians 

turns Number of complete turns 

Time Units of Time 

ms Time in milliseconds 

s Time in seconds 

Frequency Units of Frequency 

hz The frequency in hertz 

khz 


The frequency in kilohertz 


Attributes and Values 


Table C—7 describes the attributes and values for different types of elements. The 
attributes are grouped into categories to help you locate the features relevant to your 


particular design task. 


Attribute 


Description 


Aural 


cue: url(url1) url(url2) 


cue-after: url(url) 


cue-before: url (url) 


elevation: location 


mark: before after 
mark-before: text 
mark-after: text 


pause: timel time2 


pause-after: time 


pause-before: time 


Styles for Aural Browsers 


Adds a sound to an element: if a single value is present, the 
sound is played before and after the element; if two values are 
present, the first is played before and the second is played after 


Specifies a sound to be played immediately after an element 
Specifies a sound to be played immediately before an element 


Defines the vertical location of the sound, where location is 
below, level, above, lower, higher, or an angle value 


Adds a marker to an audio stream 
Marks an audio stream with the text string 
Marks an audio stream afterwards with the text string 


Adds a pause to an element: if a single value is present, the 
pause occurs before and after the element; if two values are 
present, the first pause occurs before and the second occurs after 


Adds a pause after an element 


Adds a pause before an element 
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Attribute Description 
phonemes: text Specifies the phonetic pronunciation for the audio stream 
pitch: value Defines the pitch of a speaking voice, where value is x-low, low, 


pitch-range: value 


play-during: url(url) mix 
repeat type 


rest: before after 


rest-before: type 


rest-after: type 


richness: value 


speak: type 


voice-balance: type 


voice-duration: time 
voice-family: text 


voice-rate: type 


voice-pitch: type 


voice-pitch-range: type 


voice-stress: type 


voice-volume: type 


Backgrounds 


background: color url (url) 


repeat attachment position 


medium, high, x-high, or a frequency value 
Defines the pitch range for a speaking voice, where value ranges 


from 0 to 100; a low pitch range results in a monotone voice, 
whereas a high pitch range sounds very animated 


Defines a sound to be played behind an element, where url is the 
URL of the sound file; mix overlays the sound file with the sound 
of the parent element; repeat causes the sound to be repeated, 
filling up the available time; and type is auto to play the sound 
only once, none to play nothing but the sound file, or inherit 


Specifies the rest-before and rest-after values for the audio 
Specifies a rest to be observed before speaking the content, 


where type is none, x-weak, weak, medium, strong, x-strong, 
or inherit 


Specifies a rest to be observed after speaking the content, 
where type is none, x-weak, weak, medium, strong, x-strong, or 
inherit 


Specifies the richness of the speaking voice, where value ranges 
from 0 to 100; a low value indicates a softer voice, whereas a high 
value indicates a brighter voice 


Defines how element content is to be spoken, where type is 
normal (for normal punctuation rules), spell-out (to pronounce 
one character at a time), none (to suppress the aural rendering), 
or inherit 


Specifies the voice balance, where type is left, center, right, 
leftwards, rightwards, inherit, or a number 


Specifies the duration of the voice 


Defines the name of the speaking voice, where text is male, 
female, child, or a text string indicating a specific speaking voice 
Specifies the voice rate, where type is x-slow, slow, medium, fast, 
x-fast, inherit, or a percentage 

Specifies the voice pitch, where type is x-low, low, medium, high, 
x-high, inherit, a number, or a percentage 

Specifies the voice pitch range, where type is x-low, low, medium, 
high, x-high, inherit, or a number 


Specifies the voice stress, where type is strong, moderate, none, 
reduced, or inherit 


Specifies the voice volume, where type is silent, x-soft, soft, 
medium, loud, x-loud, inherit, a number, or a percentage 


Styles Applied to an Element’s Background 


Defines the background of the element, where color is a CSS color 
name or value, url is the location of an image file, repeat defines 
how the background image should be repeated, attachment 
defines how the background image should be attached, and 
position defines the position of the background image 
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Attribute 


Description 


background: url (url) 
position size repeat 
attachment origin 
clip color 


background-attachment: type 


background-clip: location 


background-color: color 


background-image: url (url) 
background-origin: box 


background-position: x y 


background-repeat: type 


background-size: size 
Block-Level Styles 


border: length style color 


border-bottom: length 
style color 
border-left: length 
style color 
border-right: length 
style color 
border-top: length 
style color 
border-color: color 


border-bottom-color: color 


border-left-color: color 
border-right-color: color 


border-top-color: color 


Defines the background of the element, where url is the location 
of the image file, position is the position of the image, size is 

the size of the image, repeat defines how the image should be 
repeated, attachment defines how the image should be attached, 
origin defines the origin of the image, clip defines the location of 
the clipping box, and color defines the background color 


Specifies how the background image is attached, where type is 
inherit, scroll (move the image with the page content), or fixed (fix 
the image and not scroll) 

Specifies the location of the background box, where location is 
border-box, padding-box, content-box, no-clip, a unit of length, 
or a percentage 

Defines the color of the background, where color is a CSS color 
name or value; the keyword "inherit" can be used to inherit the 
background color of the parent element, or "transparent"can 

be used to allow the parent element background image to show 
through 

Specifies the image file used for the element's background, where 
url is the URL of the image file 

Specifies the origin of the background image, where box is 
border-box, padding-box, or content-box 

Sets the position of a background image, where x is the horizontal 
location in pixels, as a percentage of the width of the parent 
element, or the keyword "left", "center", or "right", y is the 
vertical location in pixels, as a percentage of the height and of 
the parent element, or the keyword "top", "center", or "bottom" 
Defines the method for repeating the background image, where 
type is no-repeat, repeat (to tile the image in both directions), 
repeat-x (to tile the image in the horizontal direction only), or 
repeat-y (to tile the image in the vertical direction only) 

Sets the size of the background image, where size is auto, cover, 
contain, a length, or a percentage 


Styles Applied to Block-Level Elements 


Defines the border style of the element, where length is the border 
width, style is the border design, and color is the border color 


Defines the border style of the bottom edge of the element 
Defines the border style of the left edge of the element 
Defines the border style of the right edge of the element 
Defines the border style of the top edge of the element 


Defines the color applied to the element's border using a CSS 
color unit 


Defines the color applied to the bottom edge of the element 
Defines the color applied to the left edge of the element 
Defines the color applied to the right edge of the element 


Defines the color applied to the top edge of the element 
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Attribute 


Description 


border-image: url(url) size 


border-style: style 


border-style-bottom: style 
border-style-left: style 
border-style-right: style 
border-style-top: style 


border-radius: tr br bl tl 


border-top-right-radius: 
horiz vert 
border-bottom-right-radius: 


horiz vert 


border-bottom-left-radius: 
horiz vert 


border-top-left-radius: 
horiz vert 
border-width: length 
border-width-bottom: length 
border-width-left: length 
border-width-right: length 
border-width-top: length 
box-shadow: top right 
bottom left color 
margin: top right 

bottom left 
margin-bottom: length 
margin-left: length 
margin-right: length 
margin-top: length 
padding: top right 
bottom left 
padding-bottom: length 
padding-left: length 
padding-right: length 
padding-top: length 
Browser 


appearance: type 


Sets an image file for the border, where url is the location of the 
image file and size is stretch, repeat, round, none, a length, or a 
percentage 


Specifies the design of the element's border where style is 
dashed, dotted double, groove, inset, none, outset, ridge, or solid 


Specifies the design of the element's bottom edge 
Specifies the design of the element's left edge 
Specifies the design of the element's right edge 
Specifies the design of the element's top edge 


Specifies the radius of the border corners in pixels, where tr 
is the top-right corner, br is the bottom-right corner, bl is the 
bottom-left corner, and tl is the top-left corner 


Specifies the horizontal and vertical radius for the top-right corner 


Specifies the horizontal and vertical radius for the bottom-right 
corner 


Specifies the horizontal and vertical radius for the bottom-left 
corner 


Specifies the horizontal and vertical radius for the top-left corner 


Defines the width of the element's border, in a unit of measure or 
using the keyword "thick", "medium", or "thin" 


Defines the width of the element's bottom edge 
Defines the width of the element's left edge 
Defines the width of the element's right edge 


Defines the width of the element's top edge 


Adds a box shadow, where top, right, bottom, and left set the 
width of the shadow and color sets the shadow color 


Defines the size of the margins around the top, right, bottom, and 
left edges of the element, in one of the CSS units of length 


Defines the size of the element's bottom margin 
Defines the size of the element's left margin 
Defines the size of the element's right margin 
Defines the size of the element's top margin 


Defines the size of the padding space within the top, right, 
bottom, and left edges of the element, in one of the CSS units 
of length 


Defines the size of the element's bottom padding 
Defines the size of the element's left padding 
Defines the size of the element's right padding 


Defines the size of the element's top padding 
Styles to Affect the Appearance of the Browser 


Specifies that an element should be displayed like a standard 
browser object, where type is normal, button, push-button, 
hyperlink, radio-button, checkbox, pop-up-menu, list-menu, 
radio-group, checkbox-group, field, or password 


(Continues) 


HTML C9 


HTML C10 


Table C-7 
(Continued): 
Attributes and values 


HTML 5 and CSS | Appendix C Cascading Styles and Selectors 


Attribute 


Description 


cursor: type 


icon: value 


nav-down: position 


nav-index: value 


nav-left: position 


nav-right: position 


nav-up: position 


resize: type 


Column 


column-count: value 


column-fill: type 


column-gap: value 


column-rule: width style 


color 


column-rule-color: color 
column-rule-style: style 


column-rule-width: width 


columns: width count 


column-span: value 


column-width: value 


Content 


bookmark-label: value 


bookmark-level: value 


bookmark-target: value 


border-length: value 


content: text 


content: attr(attr) 


Defines the cursor image used, where type is n-resize, ne-resize, 
e-resize, se-resize, s-resize, sw-resize, w-resize, nw-resize, 
crosshair, pointer, move, text, wait, help, auto, default, inherit, or 
a URL pointing to an image file 

Specifies that an element should be styled with an iconic 
equivalent, where value is auto, a url, or inherit 


Specifies where to navigate using the arrow-down and arrow-up 
navigation keys, where position is auto, a target-name, or an 
element id 


Specifies the tabbing order, where value is auto, inherit, or a 
number 


Specifies where to navigate using the arrow-left and arrow-right 
navigation keys, where position is auto, a target-name, or an 
element id 
Specifies where to navigate using the arrow-left and arrow-right 
navigation keys, where position is auto, a target-name, or an 
element id 


Specifies where to navigate using the arrow-down and arrow-up 
navigation keys, where position is auto, a target-name, or an 
element id 


Specifies whether an element is resizable and in what direction, 
where type is none, both, horizontal, vertical, or inherit 


Styles for Multi-Column Layouts 


Specifies the number of columns, where value is the column 
number or auto 


Specifies whether to balance the content of the columns, where 
type is auto or balance 


Sets the size of the gap between the columns, where value is the 
width of the gap or auto 


Adds a dividing line between the columns, where width, style, 
and color define the style of the line 


Defines the color of the dividing line 

Defines the border style of the dividing line 

Sets the width of the dividing line 

Sets the width and number of columns in the multi-column layout 


Sets the element to span across the columns, where span is 1 
or all 


Sets the width of the columns 
Styles to Generate Content 


Specifies the label of a bookmark, where value is content, an 
attribute, or a text string 


Specifies the bookmark level, where value is an integer or none 


Specifies the target of a bookmark link, where value is self, a url, 
or an attribute 


Describes a way of separating footnotes from other content, 
where value is a length or auto 


Generates a text string to attach to the content of the element 


Returns the value of the attr attribute from the element 
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Table C-7 
(Continued): attribute Description 
Attributes and values content: close-quote Attaches a close quote using the characters specified in the 

quotes style 

content: counter (text) Generates a counter using the text string text attached to the 
content (most often used with list items) 

content: counters (text) Generates a string of counters using the comma-separated 
text string text attached to the content (most often used with 
list items) 

content: no-close-quote Prevents the attachment of a close quote to an element 

content: no-open-quote Prevents the attachment of an open quote to an element 

content: open-quote Attaches an open quote using the characters specified in the 
quotes style 

content: url (url) Attaches the content of an external file indicated in the url to the 
element 

counter-increment: id Defines the element to be automatically incremented and the 

integer amount by which it is to be incremented, where id is an identifier 


of the element and integer defines by how much 


counter-reset: id integer Defines the element whose counter is to be reset and the amount 
by which it is to be reset, where id is an identifier of the element 
and integer defines by how much 


crop: value Allows a replaced element to be a rectangular area of an object 
instead of the whole object, where value is a shape or auto 


hyphenate-after: value Specifies the minimum number of characters after the hyphenation 
character, where value is an integer or auto 


hyphenate-before: value Specifies the minimum number of characters before the hyphenation 
character, where value is an integer or auto 


hyphenate-character: string Specifies the hyphenation character, string 


hyphenate-line: value Specifies the maximum number of hyphenated lines, where value 
is an integer or no-limit 

hyphenate-resource: Provides an external resource at url that defines hyphenation 

url (url) points 

hyphens: type Defines the hyphenation property, where type is none, manual, or 
auto 

image-resolution: value Defines the image resolution, where value is normal, auto, or the 
dpi of the image 

marks: type Defines an editor's mark, where type is crop, cross, or none 

quotes: textl text2 Defines the text strings for the open quotes (text7) and the close 
quotes (text2) 

string-set: values Accepts a comma-separated list of named strings, where values is 
the list of text strings 

text-replace: stringl Replaces string1 with string2 in the element content 

string2 

Display Styles Styles that Control the Display of the Element’s Content 

box-sizing: type Specifies how the width and height properties should be 


interpreted for a block element where type is content-box, 
border-box, initial, or inherit 
clip: rect (top, right, Defines what portion of the content is displayed, where top, right, 
bottom, left) bottom, and left are distances of the top, right, bottom, and left 
edges from the element's top-left corner; use a value of auto to 
allow the browser to determine the clipping region 
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Attribute 


Description 


display: type 


flex: grow shrink basis 


flex-basis: length 


flex-direction: direction 


flex-flow: direction wrap 


flex-grow: value 
flex-shrink: value 


flex-wrap: type 


height: length 


min-height: length 
min-width: length 
max-height: length 
max-width: length 


overflow: type 


overflow-style: type 


visibility: type 


width: length 
Fonts and Text 


color: color 


direction: type 


font: 
size/line-height family 


style variant weight 


font-effect: type 


font-emphasize: emphasize 
position 
font-emphasize-position: 
position 
font-emphasize-style: 
style 


Specifies the display type of the element, where type is one of 
the following: block, inline, inline-block, inherit, flex, list-item, 
none, run-in, table, inline-table, table-caption, table-column, 
table-cell, table-column-group, table-header-group, 
table-footer-group, table-row, or table-row-group 


Sets the growth rate, shrink rate, and basis size for items within a 
flexbox 


Sets the basis size for items within a flex box 


Sets the direction of items within a flexbox where direction is row, 
row-reverse, column, column-reverse, initial, or inherit 


Sets the flow of items within a flexbox where direction is the 
flex direction and wrap indicates whether items are wrapped to 
a new line 


Sets the growth rate of a flex item where value is a numeric value 
Sets the shrink rate of a flex item where value is a numeric value 


Sets whether flex items wrap to a new line where type is nowrap, 
wrap, wrap-reverse, initial, or inherit 


Specifies the height of the element in one of the CSS units 
of length 


Specifies the minimum height of the element 
Specifies the minimum width of the element 
Specifies the maximum height of the element 
Specifies the maximum width of the element 


Instructs the browser how to handle content that overflows the 
dimensions of the element, where type is auto, inherit, visible, 
hidden, or scroll 


Specifies the preferred scrolling method for overflow content, 
where type is auto, marquee-line, or marquee-block 


Defines the element's visibility, where type is hidden, visible, 
or inherit 


Specifies the width of the element in one of the CSS units 
of length 


Styles that Format the Appearance of Fonts and Text 


Specifies the color of the element's foreground (usually the 
font color) 


Specifies the direction of the text flow, where type equals Itr, rtl, 
or inherit 


Defines the appearance of the font, where style is the font's style, 
variant is the font variant, weight is the weight of the font, size is 
the size of the font, line-height is the height of the lines, and family 
is the font face; the only required attributes are size and family 


Controls the special effect applied to glyphs where type is none, 
emboss, engrave, or outline 


Sets the style of the font emphasis and decoration 


Sets the font emphasis position, where position is before or 
after 


Sets the emphasis style, where style is none, accent, dot, circle, 
or disc 
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Attribute 


Description 


font-family: family 


font-size: value 


font-size-adjust: value 


font-smooth: type 


font-stretch: type 


font-style: type 


font-variant: type 


font-weight: value 


hanging-punctuation: type 


letter-spacing: value 


line-height: value 


punctuation-trim: type 


text-align: type 
text-align-last: type 
text-decoration: type 
text-emphasis: type 
location 


text-indent: length 


text-justify: type 


text-outline: valuel 
value2 


text-shadow: color x 
y blur 


text-transform: type 


text-wrap: type 


Specifies the font face used to display text, where family is 
sans-serif, serif, fantasy, monospace, cursive, or the name of an 
installed font 


Specifies the size of the font in one of the CSS units of length 


Specifies the aspect value (which is the ratio of the font size to the 
font's ex unit height) 


Specifies the type of font smoothing, where type is auto, never, 
always, or a specified size 


Expands or contracts the font, where type is narrower, wider, 
ultra-condensed, extra-condensed, condensed, semi-condensed, 
normal, semi-expanded, extra-expanded, or ultra-expanded 


Specifies a style applied to the font, where type is normal, italic, 
or oblique 


Specifies a variant of the font, where type is inherit, normal, or 
small-caps 


Defines the weight of the font, where value is 100, 200, 300, 400, 
500, 600, 700, 800, 900, normal, lighter, bolder, or bold 


Determines whether a punctuation mark may be placed outside 
the text box, where type is none, start, end, or end-edge 


Specifies the space between letters, where value is a unit of 
length or the keyword "normal" 


Specifies the height of the lines, where value is a unit of length or 
the keyword "normal" 


Determines whether or not a full-width punctuation character 
should be trimmed if it appears at the start or end of a line, where 
type is none, start, end, or adjacent 


Specifies the horizontal alignment of text within the element, 
where type is inherit, left, right, center, or justify 


Specifies how the last line of a block is aligned for fully justified 
text, where type is start, end, left, right, center, or justify 


Specifies the decoration applied to the text, where type is blink, 
line-through, none, overline, or underline 


Specifies the emphasis applied to the text, where type is none, 
accent, dot, circle, or disk and location is before or after 


Specifies the amount of indentation in the first line of the text, 
where length is a CSS unit of length 


Specifies the justification method applied to the text, where 
type is auto, inter-word, inter-ideograph, inter-cluster, distribute, 
kashida, or tibetan 


Specifies a text outline, where value represents the outline 
thickness and value2 represents the optional blur radius 


Applies a shadow effect to the text, where color is the color of 
the shadow, x is the horizontal offset in pixels, y is the vertical 
offset in pixels, and blur is the size of the blur radius (optional); 
multiple shadows can be added with shadow effects separated by 
commas 


Defines a transformation applied to the text, where type is 
capitalize, lowercase, none, or uppercase 


Specifies the type of text wrapping, where type is normal, 
unrestricted, none, or suppress 
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Attribute 


Description 


unicode-bibi: type 


vertical-align: 


type 


white-space: type 


white-space-collapse: 


word-break: type 


word-spacing: length 


Layout 
bottom: y 
clear: 


type 


float: type 


float-offset: 


left: x 


move-to: type 


position: type 
right: x 
top: y 


z-index: value 


Grids 


type 


horiz vert 


align-content: placement; 


align-items: placement; 


display: grid 


display: inline-grid 


Allows text that flows left-to-right to be mixed with text that 
flows right-to-left, where type is normal, embed, bibi-override, or 
inherit 

Specifies how to vertically align the text with the surrounding 


content, where type is baseline, middle, top, bottom, text-top, 
text-bottom, super, sub, or one of the CSS units of length 


Specifies the handling of white space (blank spaces, tabs, and 
new lines), where type is inherit, normal, pre (to treat the text as 
preformatted text), or nowrap (to prevent line-wrapping) 


Defines how white space inside the element is collapsed, where 
type is preserve, collapse, preserve-breaks, or discard 


Controls line-breaks within words, where type is normal, keep-all, 
loose, break-strict, or break-all 


Specifies the amount of space between words in the text, where 
length is either a CSS unit of length or the keyword "normal" to 
use normal word spacing 


Styles that Define the Layout of Elements 


Defines the vertical offset of the element's bottom edge, where y 
is either a CSS unit of length or the keyword "auto" or "inherit" 


Places the element only after the specified margin is clear of 
floating elements, where type is inherit, none, left, right, or both 


Floats the element on the specified margin with subsequent 
content wrapping around the element, where type is inherit, 
none, left, right, or both 


Pushes floated elements in the opposite direction of where they 


would have been, where horiz is the horizontal displacement and 
vert is the vertical displacement 

Defines the horizontal offset of the element's left edge, where x is 
either a CSS unit of length or the keyword "auto" or "inherit" 


Causes the element to be removed from the page flow and 
reinserted at later point in the document, where type is normal, 
here, or an id value 

Defines how the element is positioned on the page, where type is 
absolute, relative, fixed, static, and inherit 


Defines the horizontal offset of the element's right edge, where x 
is either a CSS unit of length or the keyword "auto" or "inherit" 


Defines the vertical offset of the element's top edge, where y is a 
CSS unit of length or the keyword "auto" or "inherit" 


Defines how overlapping elements are stacked, where value 

is either the stacking number (elements with higher stacking 
numbers are placed on top) or the keyword "auto" to allow the 
browser to determine the stacking order 


Styles for CSS Grids 


Sets the vertical alignment of the grid within its container, 
where placement is start, end, center, space-around, 
space-between, or space-evenly 


Sets the vertical placement of content within a grid area or cell, 
where placement is stretch, start, end, or center 


Sets the display property of a page element to a block-level grid 
Sets the display property of a page element to an inline grid 
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Attribute 


Description 


grid-area: area; 


grid-area: row-start/col- 


start/row-end/col-end; 


grid-auto-columns: widthi 


width2 ...; 


grid-auto-rows: height1l 
height2 ...; 


grid-column: span value; 


grid-column: start/end; 


grid-column-end: integer; 
grid-column-gap: 


value; 


grid-column-start: integer; 


grid-gap: row column; 
grid-row: span value; 
grid-row: start/end; 


grid-row-end: integer; 


grid-row-gap: value; 


grid-row-start: integer; 


grid-template-areas: "rowl" 
" row2 " 


grid-template-columns: 
width1 width2 ...; 


grid-template-rows: height1 
height2 ...; 


justify-content: placement; 


justify-items: placement; 
max) 


minmax (min, 


repeat (repeat, tracks) 


Assigns items to areas within the grid where area is the name of 
an area defined in the grid-template-areas property 


Places items within a grid area where row-start, col-start, 
row-end, and col-end are the starting and ending gridline num- 
bers from the grid’s rows and columns 


Implicitly sets the size of the grid columns where width1, 
width2, etc. are the widths of the columns with the sequence 
repeating with each new set of columns added by the browser 


Implicitly sets the size of the grid rows where height1, height2, 
etc. are the heights of the rows with the sequence repeating with 
each new set of rows added by the browser 


Spans a grid item the number of columns specified by value 


Places or sizes a grid item between the start and end column 
line numbers 


Places an item within a grid where integer is the column line 
number for ending the item 


Sets the gap between grid columns where value is the size of the 
column gap 


Places an item within a grid where integer is the column line 
number for starting the item 


Sets the space between grid rows and columns where row is 
the internal space between grid rows and column is the internal 
space between grid columns 


Spans a grid item the number of rows specified by value 


Places or sizes a grid item between the start and end row line 
numbers 


Places an item within a grid where integer is the row line 
number for ending the item 


Sets the gap between grid rows where value is the size of the 
row gap 

Places an item within a grid where integer is the row line 
number for starting the item 


Defines the areas within the grid where row1, row2, etc. are text 
strings containing the names of the areas for each row 


Sets the number and size of the grid columns where width1, 
width2, etc. defines the width of the columns or tracks within 
the grid 

Sets the number and size of the grid rows where height1, 
height 2, etc. defines the height of the rows or tracks within 
the grid 

Sets the horizontal alignment of the grid within its container, 
where placement is start, end, center, space-around, 
space-between, or space-evenly 


Sets the horizontal placement of content within a grid area or cell, 
where placement is stretch, start, end, or center 


A function that defines a grid track size where min is the minimum 
track size for a row and column and max is the maximum 


A function that repeats the size of grid tracks, where repeat is 
the number of repetitions of the tracks specified in tracks 
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Attribute 


Description 


Lists 
list-style: type image 
position 


list-style-image: url (url) 


list-style-type: type 


list-style-position: type 


marker-offset: length 


Outlines 


outline: color style width 


outline-color: color 


outline-offset: value 


outline-style: type 


outline-width: length 


Printing 
fit: type 


fit-position: vertical 
horizontal 


page: label 


page-break-after: type 


page-break-before: type 


page-break-inside: type 


marks: type 


size: width height 
orientation 


Styles that Format Lists 


Defines the appearance of a list item, where type is the marker 
type, image is the URL of the location of an image file used for 
the marker, and position is the position of the marker 


Defines image used for the list marker, where url is the location of 
the image file 


Defines the marker type used in the list, where type is disc, 
circle, square, decimal, decimal-leading-zero, lower-roman, 
upper-roman, lower-alpha, upper-alpha, or none 


Defines the location of the list marker, where type is inside 
or outside 


Defines the distance between the marker and the enclosing list 
box, where length is either a CSS unit of length or the keyword 
"auto" or "inherit" 


Styles to Create and Format Outlines 


Creates an outline around the element content, where color is 
the color of the outline, style is the outline style, and width is the 
width of the outline 


Defines the color of the outline 


Offsets the outline from the element border, where value is the 
length of the offset 


Defines the style of the outline, where type is dashed, dotted, 
double, groove, inset, none, outset, ridge, solid, or inherit 


Defines the width of the outline, where length is expressed in a 
CSS unit of length 


Styles for Printed Output 


Indicates how to scale an element to fit on the page, where type 
is fill, hidden, meet, or slice 


Sets the position of the element in the page, where vertical is 
top, center, or bottom; horizontal is left or right; or either or both 
positions are auto, a value, or a percentage 


Specifies the page design to apply, where label is a page design 
created with the @page rule 


Defines how to control page breaks after the element, where type 
is avoid (to avoid page breaks), left (to insert a page break until 

a left page is displayed), right (to insert a page break until a right 
page is displayed), always (to always insert a page break), auto, 
or inherit 


Defines how to control page breaks before the element, where 
type is avoid left, always, auto, or inherit 


Defines how to control page breaks within the element, where 
type is avoid, auto, or inherit 


Defines how to display crop marks, where type is crop, cross, 
none, or inherit 


Defines the size of the page, where width and height are the 
width and the height of the page and orientation is the orientation 
of the page (portrait or landscape) 
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Attribute Description 

orphans: value Defines how to handle orphaned text, where value is the number 
of lines that must appear within the element before a page break 
is inserted 

widows: value Defines how to handle widowed text, where value is the number 


Special Effects 


animation: name duration 
timing delay iteration 
direction 
animation-delay: time 
animation-direction: 
direction 
animation-duration: time 
animation-iteration-count: 
value 


animation-name: text 


animation-play-state: type 


animation-timing-function: 
function 


backface-visibility: 


visible 
image-orientation: angle 


marquee-direction: 


direction 
marquee-play-count: value 


marquee-speed: speed 


marquee-style: type 


opacity: alpha 


perspective: value 


perspective-origin: origin 


rotation: angle 
rotation-point: position 


transform: function 


transform-origin: position 


transform-style: type 


of lines that must appear within the element after a page break 
is inserted 


Styles to Create Special Visual Effects 


Applies an animation with the specified duration, timing, delay, 
iteration, and direction 


Specifies the animation delay time in milliseconds 


Specifies the animation direction, where direction is normal or 
alternate 


Specifies the duration of the animation time in milliseconds 


Specifies the number of iterations in the animation 


Provides a name for the animation 


Specifies the playing state of the animation, where type is running 
or paused 


Provides the timing function of the animation, where function is 
ease, linear, ease-in, ease-out, ease-in-out, cubic-Bezier, or a 
number 


Specifies whether the back side of an element is visible during a 
transformation, where visible is hidden or visible 


Rotates the image by the specified angle 


Specifies the direction of a marquee, where direction is forward or 
reverse 


Specifies how often to loop through the marquee 


Specifies the speed of the marquee, where speed is slow, normal, 
or fast 


Specifies the marquee style, where type is scroll, slide, or 
alternate 


Sets opacity of the element, ranging from 0 (transparent) to 1 
(opaque) 

Applies a perspective transformation to the element, where value 
is the perspective length 


Establishes the origin of the perspective property, where origin is 
left, center, right, top, bottom, or a position value 


Rotates the element by angle 
Sets the location of the rotation point for the element 


Applies a 2D or a 3D transformation, where function provides the 
transformation parameters 


Establishes the origin of the transformation of an element, where 
position is the position within the element 


Defines how nested elements are rendered in 3D space, where 
type is flat or preserve-3d 
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HTML C17 


HTML C18 


HTML 5 and CSS | Appendix C Cascading Styles and Selectors 


Attribute 


Description 


transition: property 
duration timing delay 


transition-delay: time 
transition-duration: time 


transition-property: type 


transition-timing-function: 


type 

Tables 

border-collapse: type 
border-spacing: length 


caption-side: type 


empty-cells: type 


table-layout: type 


Defines a timed transition of an element, where property, 
duration, timing, and delay define the appearance and timing of 
the transition 


Sets the delay time of the transition in milliseconds 
Sets the duration time of the transition in milliseconds 


Defines the name of the CSS property modified by the transition, 
where type is all or none 


Sets the timing function of the transition, where type is ease, 
linear, ease-in, ease-out, ease-in-out, cubic-Bezier, or a number 


Styles to Format the Appearance of Tables 


Determines whether table cell borders are separate or collapsed 
into a single border, where type is separate, collapse, or inherit 


If separate borders are used for table cells, defines the distance 
between borders, where length is a CSS unit of length or inherit 


Defines the position of the caption element, where type is 
bottom, left, right, top, or inherit 


If separate borders are used for table cells, defines whether to 
display borders for empty cells, where type is hide, show, or 
inherit 

Defines the algorithm used for the table layout, where type is 
auto (to define the layout once all table cells have been read), 
fixed (to define the layout after the first table row has been read), 
or inherit 


APPENDIX D 


STARTING DATA FILES 


Making the Web &— 
More Accessible 


Studies indicate that about 20% of the population has some type of 
disability. Many of these disabilities do not affect an individual's ability to 
interact with the web. However, other disabilities can severely affect an 
individual's ability to participate in the web community. For example, on 
a news website, a blind user could not see the latest headlines. A deaf 
user would not be able to hear a news clip embedded in the site’s main 
page. A user with motor disabilities might not be able to move a mouse 
pointer to activate important links featured on the site’s home page. 


Disabilities that inhibit an individual's ability to use the web fall 
into four main categories: 


¢ Visual disability: A visual disability can include complete 
blindness, color-blindness, or an untreatable visual impairment. 

° Hearing disability: A hearing disability can include complete 
deafness or the inability to distinguish sounds of certain frequencies. 

¢ Motor disability: A motor disability can include the inability to use 
a mouse, to exhibit fine motor control, or to respond in a timely 
manner to computer prompts and queries. 

¢ Cognitive disability: A cognitive disability can include a learning 
disability, attention deficit disorder, or the inability to focus on 
large amounts of information. 


While the web includes some significant obstacles to full use 

by disabled people, it also offers the potential for contact with 

a great amount of information that is not otherwise cheaply or 
easily accessible. For example, before the web, in order to read 

a newspaper, a blind person was constrained by the expense of 
Braille printouts and audio tapes, as well as the limited availability 
of sighted people willing to read the news out loud. As a result, 
blind people would often only be able to read newspapers after 
the news was no longer new. The web, however, makes news 
available in an electronic format and in real-time. A blind user can 
use a browser that converts electronic text into speech, known 

as a screen reader, to read a newspaper website. Combined with 
the web, screen readers provide access to a broader array of 
information than was possible through Braille publications alone. 


“The power of the Web is in its universality. Access by everyone regardless of 
disability is an essential aspect.” 


—Tim Berners-Lee, W3C Director and inventor of the World Wide Web 


There are no starting Data Files needed for this appendix. 
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In addition to screen readers, many other programs and devices—known collectively 
as assistive technology or adaptive technology—are available to enable people with 
different disabilities to use the web. The challenge for the web designer, then, is to 
create web pages that are accessible to everyone, including (and perhaps especially) to 
people with disabilities. In addition to being a design challenge, for some designers, web 
accessibility is the law. 


Working with Section 508 Guidelines 


In 1973, Congress passed the Rehabilitation Act, which aimed to foster economic 
independence for people with disabilities. Congress amended the act in 1998 to reflect 
the latest changes in information technology. Part of the amendment, Section 508, 
requires that any electronic information developed, procured, maintained, or used by 
the federal government be accessible to people with disabilities. Because the web is one 
of the main sources of electronic information, Section 508 has had a profound impact 
on how web pages are designed and how web code is written. Note that the standards 
apply to federal websites, but not to private sector websites; however, if a site is provided 
under contract to a federal agency, the website or portion covered by the contract has 
to comply. Required or not, though, you should follow the Section 508 guidelines 
not only to make your website more accessible, but also to make your HTML code 
more consistent and reliable. The Section 508 guidelines are of interest not just to web 
designers who work for the federal government, but to all web designers. 

The Section 508 guidelines encompass a wide range of topics, covering several types of 
disabilities. The part of Section 508 that impacts web design is sub-section 1194.22, titled 


§ 1194.22 Web-based intranet and internet information and applications. 


Within this section are 15 paragraphs, numbered (a) through (p), which describe how 
each facet of a website should be designed so as to maximize accessibility. Let’s examine 
each of these paragraphs in detail. 


Graphics and Images 


The first paragraph in sub-section 1194.22 deals with graphic images. The standard for 
the use of graphic images is that 


§1194.22 (a) A text equivalent for every nontext element shall be provided (e.g., via 
“alt”, “longdesc”, or in element content). 


In other words, any graphic image that contains page content needs to include a text 
alternative to make the page accessible to visually impaired people. One of the simplest 
ways to do this is to use the alt attribute with every inline image that displays page 
content. For example, in Figure D-1, the alt attribute provides the text of a graphical 
logo for users who can’t see the graphic. 


— FigureD-1—) D-1 Using the alt attribute 


<img src="jkson.jpg" alt="Jackson Electronics" /> 
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Not every graphic image requires a text alternative. For example, a decorative image 
such as a bullet does not need a text equivalent. In those cases, you should include 
the alt attribute, but set its value to an empty text string. You should never neglect to 
include the alt attribute. If you are writing XHTML-compliant code, the alt attribute 
is required. In other cases, screen readers and other nonvisual browsers will recite the 
filename of a graphic image file if no value is specified for the alt attribute. Since the 
filename is usually of no interest to the end-user, this results in needless irritation. 

The alt attribute is best used for short descriptions that involve five words or fewer. 
It is less effective for images that require long descriptive text. You can instead link these 
images to a document containing a more detailed description. One way to do this is with 
the longdesc attribute, which uses the syntax 


<img srce="url" longdesc="url" /> 


where url for the longdesc attribute points to a document containing a detailed description 
of the image. Figure D-2 shows an example that uses the longdesc attribute to point to a 
web page containing a detailed description of a sales chart. 


Figure D-2 Using the alt attribute 


Sales at Jackson Electronics Sales at Jackson Electronics 


sales. html 


Jan Feb Mar Apr May an 
Month 


<img src="chart.jpg" alt="Sales Chart" 
longdesc="sales.html" /> 


In browsers that support the longdesc attribute, the attribute’s value is presented as a 
link to the specified document. However, since many browsers do not yet support this 
attribute, many web designers currently use a D-link. A D-link is an unobtrusive “D” 
placed next to the image on the page, which is linked to an external document containing 
a fuller description of the image. Figure D-3 shows how the sales chart data can be 
presented using a D-link. 
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Figure D-3 Using a D-link 


Sales at Jackson Electronics 


Sales at Jackson Electronics 


sales.html 


<img src="chart.jpg" alt="Sales Chart" /> 
<a href="sales.html">D</a> 


To make your pages accessible to visually-impaired users, you will probably use a 
combination of alternative text and linked documents. 


Multimedia 


Audio and video have become important ways of conveying information on the web. 
However, creators of multimedia presentations should also consider the needs of deaf 
users and users who are hard of hearing. The standard for multimedia accessibility is 


§1194.22 (b) Equivalent alternatives for any multimedia presentation shall be 
synchronized with the presentation. 


This means that any audio clip needs to be accompanied by a transcript of the audio’s 
content, and any video clip needs to include closed captioning. Refer to your multimedia 
software's documentation on creating closed captioning and transcripts for your video 
and audio clips. 


Color 


Color is useful for emphasis and conveying information, but when color becomes an 
essential part of the site’s content, you run the risk of shutting out people who are color 
blind. For this reason the third Section 508 standard states that 


§1194.22 (c) Web pages shall be designed so that all information conveyed with color 
is also available without color, for example from context or markup. 


About 8% of men and 0.5% of women are afflicted with some type of color blindness. 
The most serious forms of color blindness are 


e deuteranopia: an absence of green sensitivity; deuteranopia is one example of 
red-green color blindness, in which the colors red and green cannot be easily 
distinguished. 

¢ protanopia: an absence of red sensitivity; protanopia is another example of red-green 
color blindness. 

¢ tritanopia: an absence of blue sensitivity; people with tritanopia have much less loss of 
color sensitivity than other types of color blindness. 

¢ achromatopsia: absence of any color sensitivity. 


The most common form of serious color blindness is red-green color blindness. 
Figure D-4 shows how each type of serious color blindness would affect a person’s 
view of a basic color wheel. 
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Figure D-4 Types of color blindness 


Ach omatopsia 


Color combinations that are easily readable for most people may be totally unreadable 
for users with certain types of color blindness. Figure D-5 demonstrates the accessibility 
problems that can occur with a graphical logo that contains green text on a red background. 
For people who have deuteranopia, protanopia, or achromatopsia, the logo is much more 
difficult to read. 


Figure D-5 The effect of color blindness on graphical content 


To make your page more accessible to people with color blindness, you can do the 
following: 


e Provide noncolor clues to access your page’s content. For example, some web forms 
indicate required entry fields by displaying the field names in a red font. You can 
supplement this for color blind users by marking required fields with a red font and 
with an asterisk or other special symbol. 

¢ Avoid explicit references to color. Don’t instruct your users to click a red button in a 
web form when some users are unable to distinguish red from other colors. 

e Avoid known areas of color difficulty. Since most color blindness involves red-green 
color blindness, you should avoid red and green text combinations. 
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e Use bright colors, which are the easiest for color blind users to distinguish. 
¢ Provide a grayscale or black and white alternative for your color blind users, and be 
sure that your link to that page is easily viewable. 


Several sites on the web include tools you can use to test your website for color blind 
accessibility. You can also load color palettes into your graphics software to see how your 
images will appear to users with different types of color blindness. 


Style Sheets 


By controlling how a page is rendered in a browser, style sheets play an important role 

in making the web accessible to users with disabilities. Many browsers, such as Internet 
Explorer, allow a user to apply their own customized style sheet in place of the style sheet 
specified by a web page’s designer. This is particularly useful for visually impaired users 

who need to display text in extra large fonts with a high contrast between the text and the 
background color (yellow text on a black background is a common color scheme for such 
users). In order to make your pages accessible to those users, Section 508 guidelines state that 


§1194.22 (d) Documents shall be organized so they are readable without requiring an 
associated style sheet. 


To test whether your site fulfills this guideline, you should view the site without the 
style sheet. Some browsers allow you to turn off style sheets; alternately, you can redirect 
a page to an empty style sheet. You should modify any page that is unreadable without 
its style sheet to conform with this guideline. 


Image Maps 
Section 508 provides two standards that pertain to image maps: 


§1194.22 (e) Redundant text links shall be provided for each active region of a 
server-side image map. 
and 


§1194.22 (f) Client-side image maps shall be provided instead of server-side image 
maps except where the regions cannot be defined with an available 
geometric shape. 


In other words, the preferred image map is a client-side image map, unless the map 
uses a shape that cannot be defined on the client side. Since client-side image maps 
allow for polygonal shapes, this should not be an issue; however if you must use a 
server-side image map, you need to provide a text alternative for each of the map’s links. 
Because server-side image maps provide only map coordinates to the server, this text 
is necessary in order to provide link information that is accessible to blind or visually 
impaired users. Figure D-6 shows a server-side image map that satisfies the Section 508 
guidelines by repeating the graphical links in the image map with text links placed below 
the image. 


Figure D-6 Making a server-side image map accessible 


FJachson Electronica 


home products stores support 


[ home ][ products ] [ stores ][ support ] 
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Client-side image maps do not have the same limitations as server-side maps because 
they allow you to specify alternate text for each hotspot within the map. For example, if 
the image map shown in Figure D-6 were a client-side map, you could make it accessible 
using the following HTML code: 


<img src="servermap.jpg" alt="Jackson Electronics" 
usemap="#links" /> 
<map name="links"> 
<area shape="rect" href="home.html" alt="home" 
coords="21,69,123,117" /> 
<area shape="rect" href="products.html" alt="products" 
coords="156,69,258,117" /> 
<area shape="rect" href="stores.html" alt="stores" 
coords="302,69,404,117" /> 
<area shape="rect" href="support.html" alt="support" 
coords="445,69,547,117" /> 
</map> 


Screen readers or other nonvisual browsers use the value of the alt attribute within 
each <area /> tag to give users access to each area. However, because some older 
browsers cannot work with the alt attribute in this way, you should also include the text 
alternative used for server-side image maps. 


Tables 


Tables can present a challenge for disabled users, particularly for those who employ 
screen readers or other nonvisual browsers. To render a web page, these browsers 
employ a technique called linearizing, which processes web page content using a few 
general rules: 


1. Convert all images to their alternative text. 

2. Present the contents of each table one cell at a time, working from left to right 
across each row before moving down to the next row. 

3. If a cell contains a nested table, that table is linearized before proceeding to the 
next cell. 


Figure D-7 shows how a nonvisual browser might linearize a sample table. 
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Figure D-7 Linearizing a table 


Model 


table 


Procestor Memory DVD Burner Modem Network Adapter 


tel24GH: 256MB N res N 


linearized content 


Desktop PCs 
Model 
Processor 
Memory 
DVD Burner 
Modem 
Network Adapter 
Paragon 2.4 
Intel 2.4GHz 
256MB 

No 

Yes 

No 

Paragon 3.7 
Intel 3.7GHz 
512MB 

Yes 

Yes 

No 

Paragon 5.9 
Intel 5.9GHz 
1024MB 
Yes 

Yes 

Yes 


One way of dealing with the challenge of linearizing is to structure your tables so that 
they are easily interpreted even when linearized. However, this is not always possible, 
especially for tables that have several rows and columns or may contain several levels of 


nested tables. The Section 508 guidelines for table creation state that 


§1194.22 (g) 


and 


Row and column headers shall be identified for data tables. 


§1194.22 (h) Markup shall be used to associate data cells and header cells for data 
tables that have two or more logical levels of row or column headers. 


To fulfill the 1194.22 (g) guideline, you should use the <th> tag for any table cell that 
contains a row or column header. By default, header text appears in a bold centered 
font; however, you can override this format using a style sheet. Many nonvisual browsers 
can search for header cells. Also, as a user moves from cell to cell in a table, these 
browsers can announce the row and column headers associated with each cell. In this 
way, using the <th> tag can significantly reduce some of the problems associated with 


linearizing. 


You can also use the scope attribute to explicitly associate a header with a row, 
column, row group, or column group. The syntax of the scope attribute is 


<th scope= 


"type"> .. </th> 


where type is either row, column, rowgroup, Or colgroup. Figure D-8 shows how to 
use the scope attribute to associate the headers with the rows and columns of a table. 
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HTML D9 


Figure D-8 Using the scope attribute 


<table border="1" cellpadding="5"> 
<tr> 
<th scope="col">Model</th> 
<th scope="col">Processor</th> 
<th scope="col">Memory</th> 
</tr> 
<tr> 
<th scope="row">Paragon 2.4</th> 
<td>Intel 2.4GHz</td> 


<td>256MB</td> 

</tr> . 

pee Model | Processor | Memory 
<th scope="row">Paragon 3.7</th> r — | = | 
<td>Intel 3.7GHz</td> Paragon 2.4spIntel 2.4GHz | 256MB 
<td>512MB</td> 

</tr> 

</table> Paragon 3.7pIntel 3.7GHz | 512MB 

HTML code table 


A nonvisual browser that encounters the table in Figure D-8 can indicate to users 
which rows and columns are associated with each data cell. For example, the browser 
could indicate that the cell value “512MB” is associated with the Memory column and 
the Paragon 3.7 row. 

For more explicit references, HTML also supports the headers attribute, which 
specifies the cell or cells that contain header information for a particular cell. The syntax 
of the headers attribute is 


<td headers="ids"> .. </td> 


where ids isa list of id values associated with header cells in the table. Figure D-9 
demonstrates how to use the headers attribute. 


Figure D-9 Using the headers attribute 


<table> 
<tr> 
<th id="c1">Model</th> 
<th id="c2">Processor</th> 
<th id="c3">Memory</th> 
</tr> 
<tr> 
<th id="r1" headers="c1">Paragon 2.4</th> 
<td headers="r1 c2">Intel 2.4GHz</td> 
<td headers="r1 ¢3">256MB</td> 


</tr> : — : 
ae | Model | Processor Memory 

<th id="r2" headers="c1">Paragon 3.7</th> 

<td headers="r2 c2">Intel 3.7GHz</td> 

<td headers="r2 ¢3">512MB</td> Paragon 2.4 Intel 2.4GHz | 256MB 
</tr> a | Pe 
</table> | Paragon 3.7 | Intel 3.7GHz | 512MB 


HTML code table 


Note that some older browsers do not support the scope and headers attributes. 
For this reason, it can be useful to supplement your tables with caption and summary 


attributes in order to provide even more information to blind and visually impaired users. 
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Frame Sites 


When a nonvisual browser opens a frame site, it can render the contents of only one 
frame at a time. Users are given a choice of which frame to open. So, it’s important that 
the name given to a frame indicates the frame’s content. For this reason, the Section 508 
guideline for frames states that 


§1194.22 (i) Frames shall be titled with text that facilitates frame identification and 
navigation. 


Frames can be identified using either the title attribute or the name attribute, and 
different nonvisual browsers use different attributes. For example, the Lynx browser uses 
the name attribute, while the IBM Home Page Reader uses the title attribute. For this 
reason, you should use both attributes in your framed sites. If you don’t include a title 
or name attribute in the frame element, some nonvisual browsers retrieve the document 
specified as the frame’s source and then use that page’s title as the name for the frame. 

The following code demonstrates how to make a frame site accessible to users with 
disabilities. 

<frameset cols="25%, *"> 

<frame srce="title.htm" title="banner" name="banner" /> 
<frameset rows="100, *"> 
<frame src="links.htm" title="links" name="links" /> 
<frame src="home.htm" title="documents" name="documents" /> 
</frameset> 
</frameset> 


Naturally, you should make sure that any document displayed in a frame follows the 
Section 508 guidelines. 


Animation and Scrolling Text 


Animated GIFs, scrolling marquees, and other special features can be sources of irritation 
for any web user; however, they can cause serious problems for certain users. For 
example, people with photosensitive epilepsy can experience seizures when exposed to 
a screen or portion of a screen that flickers or flashes within the range of 2 to 55 flashes 
per second (2 to 55 Hertz). For this reason, the Section 508 guidelines state that 


§1194.22 (j) Pages shall be designed to avoid causing the screen to flicker with a 
frequency greater than 2 Hz and lower than 55 Hz. 


In addition to problems associated with photosensitive epilepsy, users with cognitive 
or visual disabilities may find it difficult to read moving text, and most screen readers are 
unable to read moving text. Therefore, if you decide to use animated elements, you must 
ensure that each element's flickering and flashing is outside of the prohibited range, and 
you should not place essential page content within these elements. 


Scripts, Applets, and Plug-Ins 


Scripts, applets, and plug-ins are widely used to make web pages more dynamic and 
interesting. The Section 508 guidelines for scripts state that 


§1194.22 (I) When pages utilize scripting languages to display content, or to create 
interface elements, the information provided by the script shall be 
identified with functional text that can be read by adaptive technology. 
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Scripts are used for a wide variety of purposes. The following list describes some of 
the more popular uses of scripts and how to modify them for accessibility: 


¢ Pull-down menus: Many web designers use scripts to save screen space by inserting 
pull-down menus containing links to other pages in the site. Pull-down menus are 
usually accessed with a mouse. To assist users who cannot manipulate a mouse, 
include keyboard shortcuts to all pull-down menus. In addition, the links in a pull-down 
menu should be repeated elsewhere on the page or on the site in a text format. 

Image rollovers: Image rollovers are used to highlight linked elements. However, since 
image rollovers rely on the ability to use a mouse, pages should be designed so that 
rollover effects are not essential for navigating a site or for understanding a page’s content. 
Dynamic content: Scripts can be used to insert new text and page content. Because 
some browsers designed for users with disabilities have scripting turned off by default, 
you should either not include any crucial content in dynamic text, or you should 
provide an alternate method for users with disabilities to access that information. 


Applets and plug-ins are programs external to a web page or browser that add special 
features to a website. The Section 508 guideline for applets and plug-ins is 


§1194.22 (m) When a Web page requires that an applet, plug-in or other application 
be present on the client system to interpret page content, the page must 
provide a link to a plug-in or applet that complies with §1994.21 (a) 
through (i). 


This guideline means that any applet or plug-in used with your website must be 
compliant with sections §1994.21(a) through (i) of the Section 508 accessibility law, 
which deal with accessibility issues for software applications and operating systems. If 
the default applet or plug-in does not comply with Section 508, you need to provide a 
link to a version of that applet or plug-in that does. For example, a web page containing 
a Real Audio clip should have a link to a source for the necessary player. This places the 
responsibility on the web page designer to know that a compliant application is available 
before requiring the clip to work with the page. 


Web Forms 


The Section 508 standard for web page forms states that 


§1194.22 (n) When electronic forms are designed to be completed on-line, the form 
shall allow people using assistive technology to access the information, 
field elements, and functionality required for completion and submission 
of the form, including all directions and cues. 


This is a general statement that instructs designers to make forms accessible, but it 
doesn’t supply any specific instructions. The following techniques can help you make 
web forms that comply with Section 508: 


¢ Push buttons should always include value attributes. The value attribute contains the 
text displayed on a button, and is rendered by different types of assistive technology. 

e Image buttons should always include alternate text that can be rendered by nonvisual 
browsers. 

¢ Labels should be associated with any input box, text area box, option button, checkbox, 
or selection list. The labels should be placed in close proximity to the input field and 
should be linked to the field using the label element. 

¢ Input boxes and text area boxes should, when appropriate, include either default text 
or a prompt that indicates to the user what text to enter into the input box. 

e Interactive form elements should be triggered by either the mouse or the keyboard. 
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The other parts of a web form should comply with other Section 508 standards. For 
example, if you use a table to lay out the elements of a form, make sure that the form still 
makes sense when the table is linearized. 


Links 


It is common for web designers to place links at the top, bottom, and sides of every 

page in their websites. This is generally a good idea, because those links enable users to 
move quickly and easily through a site. However, this technique can make it difficult to 
navigate a page using a screen reader, because screen readers move through a page from 
the top to bottom, reading each line of text. Users of screen readers may have to wait 
several minutes before they even get to the main body of a page, and the use of repetitive 
links forces such users to reread the same links on each page as they move through a 
site. To address this problem, the Section 508 guidelines state that 


§1194.22 (0) A method shall be provided that permits users to skip repetitive 
navigation links. 


One way of complying with this rule is to place a link at the very top of each page that 
allows users to jump to the page’s main content. In order to make the link unobtrusive, 
it can be attached to a transparent image that is one pixel wide by one pixel high. For 
example, the following code lets users of screen readers jump to the main content of the 
page without needing to go through the content navigation links on the page; however, 
the image itself is invisible to other users and so does not affect the page’s layout or 
appearance. 


<a href="#main"> 

<img src="sSpacer.gif" height="1" width="1" alt="Skip to main 
content" /> 
</a> 


<a name="main"> </a> 
page content goes here ... 


One advantage to this approach is that a template can be easily written to add this 
code to each page of the website. 


Timed Responses 


For security reasons, the login pages of some websites automatically log users out after 
a period of inactivity, or if users are unable to log in quickly. Because disabilities may 
prevent some users from being able to complete a login procedure within the prescribed 
time limit, the Section 508 guidelines state that 


§1194.22 (p) When a timed response is required, the user shall be alerted and given 
sufficient time to indicate that more time is required. 


The guideline does not suggest a time interval. To satisfy Section 508, your page 
should notify users when a process is about to time out and prompt users whether 
additional time is needed before proceeding. 
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Providing a Text-Only Equivalent 


If you cannot modify a page to match the previous accessibility guidelines, as a last 
resort you can Create a text-only page: 


§1194.22 (k) A text-only page, with equivalent information or functionality, shall 
be provided to make a Web site comply with the provisions of this 
part, when compliance cannot be accomplished in any other way. The 
content of the text-only pages shall be updated whenever the primary 
page changes. 


To satisfy this requirement, you should 


¢ provide an easily accessible link to the text-only page. 

e make sure that the text-only page satisfies the Section 508 guidelines. 
¢ duplicate the essential content of the original page. 

¢ update the alternate page when you update the original page. 


By using the Section 508 guidelines, you can work toward making your website 
accessible to everyone, regardless of disabilities. 


Understanding the Web Accessibility Initiative 


In 1999, the World Wide Web Consortium (W3C) developed its own set of guidelines for 
web accessibility called the Web Accessibility Initiative (WAI). The WAI covers many of 
the same points as the Section 508 rules, and expands on them to cover basic website 
design issues. The overall goal of the WAI is to facilitate the creation of websites that are 
accessible to all, and to encourage designers to implement HTML in a consistent way. 

The WAI sets forth 14 guidelines for web designers. Within each guideline is a 
collection of checkpoints indicating how to apply the guideline to specific features of a 
website. Each checkpoint is also given a priority score that indicates how important the 
guideline is for proper web design: 


¢ Priority 1: A web content developer must satisfy this checkpoint. Otherwise, one or 
more groups will find it impossible to access information in the document. Satisfying 
this checkpoint is a basic requirement for some groups to be able to use web 
documents. 

¢ Priority 2: A web content developer should satisfy this checkpoint. Otherwise, one or 
more groups will find it difficult to access information in the document. Satisfying this 
checkpoint will remove significant barriers to accessing web documents. 

¢ Priority 3: A web content developer may address this checkpoint. Otherwise, one or 
more groups will find it somewhat difficult to access information in the document. 
Satisfying this checkpoint will improve access to web documents. 


The following table lists WAI guidelines with each checkpoint and its corresponding 
priority value. You can learn more about the WAI guidelines and how to implement them 
by going to the World Wide Web Consortium website at www.w3.org. 
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WAI Guidelines Priority 


1. Provide equivalent alternatives to auditory and visual content 


1.1 Provide a text equivalent for every nontext element (e.g., via alt, longdesc, or in 1 
element content). 
This includes: images, graphical representations of text (including symbols), image map 
regions, animations (e.g., animated GIFs), applets and programmatic objects, ascii art, 
frames, scripts, images used as list bullets, spacers, graphical buttons, sounds (played 
with or without user interaction), stand-alone audio files, audio tracks of video, and video. 


1.2 Provide redundant text links for each active region of a server-side image map. 1 


1.3 Until user agents can automatically read aloud the text equivalent of a visual track, 1 
provide an auditory description of the important information of the visual track of a 
multimedia presentation. 


1.4 For any time-based multimedia presentation (e.g., a movie or animation), synchronize 1 
equivalent alternatives (e.g., captions or auditory descriptions of the visual track) with 
the presentation. 


1.5 Until user agents render text equivalents for client-side image map links, provide 3 
redundant text links for each active region of a client-side image map. 


2. Don’t rely on color alone 


2.1 Ensure that all information conveyed with color is also available without color, for 1 
example from context or markup. 


2.2 Ensure that foreground and background color combinations provide sufficient 2 
contrast when viewed by someone having color deficits or when viewed on a black 
and white screen. [Priority 2 for images, Priority 3 for text]. 


3. Use markup and style sheets and do so properly 


3.1 When an appropriate markup language exists, use markup rather than images to 2 
convey information. 


3.2 Create documents that validate to published formal grammars. 
3.3 Use style sheets to control layout and presentation. 


3.4 Use relative rather than absolute units in markup language attribute values and style 
sheet property values. 


3.5 Use header elements to convey document structure and use them according to 2 
specification. 


3.6 Mark up lists and list items properly. 


3.7 Mark up quotations. Do not use quotation markup for formatting effects such as 
indentation. 


4. Clarify natural language usage 


4.1 Clearly identify changes in the natural language of a document's text and any text 1 
equivalents (e.g., captions). 


4.2 Specify the expansion of each abbreviation or acronym in a document where it 3 
first occurs. 


4.3 Identify the primary natural language of a document. 3 
5. Create tables that transform gracefully 
5.1 For data tables, identify row and column headers. 1 


5.2 For data tables that have two or more logical levels of row or column headers, use 1 
markup to associate data cells and header cells. 


5.3 Do not use a table for layout unless the table makes sense when linearized. If a 2 
table does not make sense, provide an alternative equivalent (which may be a 
linearized version). 


5.4 If a table is used for layout, do not use any structural markup for the purpose of visual 2 
formatting. 
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WAI Guidelines Priority 
5.5 Provide summaries for tables. 3 
5.6 Provide abbreviations for header labels. 3 


6. Ensure that pages featuring new technologies transform gracefully 


6.1 Organize documents so they may be read without style sheets. For example, when an 1 
HTML document is rendered without associated style sheets, it must still be possible 
to read the document. 


6.2 Ensure that equivalents for dynamic content are updated when the dynamic content 1 
changes. 
6.3 Ensure that pages are usable when scripts, applets, or other programmatic objects 1 


are turned off or not supported. If this is not possible, then provide equivalent 
information on an alternative accessible page. 


6.4 For scripts and applets, ensure that event handlers are input device-independent. 

6.5 Ensure that dynamic content is accessible or provide an alternative presentation or page. 

7. Ensure user control of time-sensitive content changes 

7.1 Until user agents allow users to control flickering, avoid causing the screen to flicker. 1 


7.2 Until user agents allow users to control blinking, avoid causing content to blink 2 
(i.e., change presentation at a regular rate, such as turning on and off). 


7.3 Until user agents allow users to freeze moving content, avoid movement in pages. 


7.4 Until user agents provide the ability to stop the refresh, do not create periodically 
auto-refreshing pages. 


7.5 Until user agents provide the ability to stop auto-redirect, do not use markup to 2 
redirect pages automatically. Instead, configure the server to perform redirects. 


8. Ensure direct accessibility of embedded user interfaces 


8.1 Make programmatic elements such as scripts and applets directly accessible or 2 
compatible with assistive technologies [Priority 1 if functionality is important and not 
presented elsewhere, otherwise Priority 2.] 


9. Design for device-independence 


9.1 Provide client-side image maps instead of server-side image maps except where the 1 
regions cannot be defined with an available geometric shape. 


9.2 Ensure that any element with its own interface can be operated in a 2 
device-independent manner. 


9.3 For scripts, specify logical event handlers rather than device-dependent event handlers. 2 
9.4 Create a logical tab order through links, form controls, and objects. 


9.5 Provide keyboard shortcuts to important links (including those in client-side image 
maps), form controls, and groups of form controls. 


10. Use interim solutions 


10.1 Until user agents allow users to turn off spawned windows, do not cause pop-ups or 2 
other windows to appear and do not change the current window without informing 
the user. 

10.2 Until user agents support explicit associations between labels and form controls, 2 


ensure that labels are properly positioned for all form controls with implicitly 
associated labels. 


10.3 Until user agents (including assistive technologies) render side-by-side text correctly, 3 
provide a linear text alternative (on the current page or some other) for all tables 
that lay out text in parallel, word-wrapped columns. 


10.4 Until user agents handle empty controls correctly, include default, place-holding 3 
characters in edit boxes and text areas. 


10.5 Until user agents (including assistive technologies) render adjacent links distinctly, 3 
include nonlink, printable characters (surrounded by spaces) between adjacent links. 
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WAI Guidelines Priority 


11. Use W3C technologies and guidelines 


11.1 Use W3C technologies when they are available and appropriate for a task and use 2 
the latest versions when supported. 


11.2 Avoid deprecated features of W3C technologies. 2 


11.3 Provide information so that users may receive documents according to their 
preferences (e.g., language, content type, etc.) 


11.4 If, after best efforts, you cannot create an accessible page, provide a link to an 1 
alternative page that uses W3C technologies, is accessible, has equivalent information 
(or functionality), and is updated as often as the inaccessible (original) page. 


12. Provide context and orientation information 


12.1 Title each frame to facilitate frame identification and navigation. 1 

12.2 Describe the purpose of frames and how frames relate to each other if this is not 2 
obvious from frame titles alone. 

12.3 Divide large blocks of information into more manageable groups where natural and 2 
appropriate. 

12.4 Associate labels explicitly with their controls. 2 


13. Provide clear navigation mechanisms 
13.1 Clearly identify the target of each link. 
13.2 Provide metadata to add semantic information to pages and sites. 


13.3 Provide information about the general layout of a site (e.g., a site map or table of 
contents). 


13.4 Use navigation mechanisms in a consistent manner. 2 
13.5 Provide navigation bars to highlight and give access to the navigation mechanism. 


13.6 Group related links, identify the group (for user agents), and, until user agents do 
so, provide a way to bypass the group. 


13.7 If search functions are provided, enable different types of searches for different skill 3 
levels and preferences. 


13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. 


13.9 Provide information about document collections (i.e., documents comprising 
multiple pages). 


13.10 Provide a means to skip over multiline ASCII art. 3 
14. Ensure that documents are clear and simple 

14.1 Use the clearest and simplest language appropriate for a site's content. 1 
14.2 Supplement text with graphic or auditory presentations where they will facilitate 3 


comprehension of the page. 


14.3 Create a style of presentation that is consistent across pages. 3 
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Checking Your Website for Accessibility 


As you develop your website, you should periodically check it for accessibility. In 
addition to reviewing the Section 508 and WAI guidelines, you can do several things to 
verify that your site is accessible to everyone: 


e Set up your browser to suppress the display of images. Does each page still convey all 
of the necessary information? 

e Set your browser to display pages in extra large fonts and with a different color 
scheme. Are your pages still readable under these conditions? 

¢ Try to navigate your pages using only your keyboard. Can you access all of the links 
and form elements? 

¢ Open your page in a screen reader or other nonvisual browser. (The W3C website 
contains links to several alternative browsers that you can download as freeware or on 
a short-term trial basis in order to evaluate your site.) 

e Use tools that test your site for accessibility. (The WAI pages at the W3C website 
contain links to a wide variety of tools that report on how well your site complies with 
the WAI and Section 508 guidelines.) 


Following the accessibility guidelines laid out by Section 508 and the WAI will result 
in a website that is not only more accessible to a wider audience, but whose design is 
also cleaner, easier to work with, and easier to maintain. 


HTML D17 


APPENDIX F 


STARTING DATA FILES 


Designing for 
the Web 


Before you begin creating links between your website pages, 

it’s worthwhile to use a technique known as storyboarding to 
map out exactly how you want the pages to relate to each other. 
A storyboard is a diagram of a website’s structure, showing all 
the pages in the site and indicating how they are linked together. 
Because websites use a variety of structures, it’s important to 
storyboard your website before you start creating your pages. 
This helps you determine which structure works best for the type 
of information your site contains. A well-designed structure ensures 
that users will be able to navigate the site without getting lost or 
missing important information. 


Every website should begin with a single home page that acts as 

a focal point for the website. It is usually the first page that users 
see. From that home page, you add links to other pages in the site, 
defining the site’s overall structure. The websites you commonly 
encounter as you navigate the web employ several different web 
structures. You'll examine some of these structures to help you 
decide how to design your own sites. 


Linear Structures 


If you wanted to create an online version of a famous play, like 
Shakespeare’s Hamlet, one method would be to link the individual 
scenes of the play in a long chain. Figure E-1 shows the storyboard 
for this linear structure, in which each page is linked with the 
pages that follow and precede it. Readers navigate this structure by 
moving forward and backward through the pages, much as they 
might move forward and backward through the pages of a book. 


HTM 


There are no starting Data Files needed for this appendix. 


HTML E1 
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Each page is linked with the 
preceding and following pages. 
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Act | Act | Act | Act Il Act Il Act Il 
Scene 1 Scene 2 Scene 3 Scene 1 Scene 2 Scene 3 


Linear structures work for websites that are small in size and have a clearly defined 
order of pages. However, they can be difficult to work with as the chain of pages 
increases in length. An additional problem is that in a linear structure, you move farther 
and farther away from the home page as you progress through the site. Because home 
pages often contain important general information about a site and its author, this is 
usually not the best design technique. 

You can modify this structure to make it easier for users to return immediately to the 
home page or other main pages. Figure E-2 shows this online play with an augmented 
linear structure, in which each page contains an additional link back to the opening 
page of each act. 


— Figuree-2—) An augmented linear structure 


Each page is linked with the preceding 
and following pages with an additional 
link to the first scene page. 


Act | Act | Act | Act Il Act Il Act Il 


Hierarchical Structures 


Another popular structure is the hierarchical structure, in which the home page links 
to pages dedicated to specific topics. Those pages, in turn, can be linked to even more 
specific topics. A hierarchical structure allows users to easily move from general to 
specific and back again. In the case of the online play, you could link an introductory 
page containing general information about the play to pages that describe each of 

the play’s acts, and within each act you could include links to individual scenes. 

See Figure E-3. 
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Figure E-3 A hierarchical structure 


Pages are arranged in a hierarchy from 
the general down to the specific; users 
can move up and down the tree. 
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Mixed Structures 


Within this structure, a user could move quickly to a specific scene within the play, 
bypassing the need to move through each scene that precedes it. 

With larger and more complex websites, you often need to use a combination of 
structures. Figure E-4 shows the online play using a mixture of hierarchical and linear 
structures. The overall form is hierarchical, as users can move from a general introduction 
down to individual scenes; however, users can also move through the site in a linear 
fashion, going from act to act and scene to scene. Finally, each individual scene contains 
a link to the home page, allowing users to jump to the top of the hierarchy without 
moving through the different levels. 
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Figure E-4 A mixed structure 


Pages are linked in a variety of ways. 
(== ss individual scenes 
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As these examples show, a little foresight can go a long way toward making your 
website easier to use. Also keep in mind that search results from a web search engine 
such as Google or Yahoo! can point users to any page in your website—not just your 
home page—so users will need to be able to quickly understand what your site contains 
and how to navigate it. Ata minimum, each page should contain a link to the site’s 
home page or to the relevant main topic page. In some cases, you might want to supply 
your users with a site index, which is a page containing an outline of the entire site and 
its contents. Unstructured websites can be difficult and frustrating to use. Consider the 
storyboard of the site displayed in Figure E-5. 
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Figure E-5 Website with no coherent structure 


fit 


i 


This confusing structure makes it difficult for users to grasp the site’s contents and 
scope. The user might not even be aware of the presence of some pages because there 
are no connecting links, and some of the links point in only one direction. The web is 
a competitive place; studies have shown that users who don’t see how to get what they 
want within the first few seconds often leave a website. How long would a user spend on 
a site like the one shown in Figure E-5? 


Protected Structures 


Sections of most commercial websites are often off-limits except to subscribers and 
registered customers. Storyboarding a protected structure is particularly important to 
ensure that no unauthorized access to the protected area is allowed in the site design. As 
shown in Figure E-6, these sites have a password-protected web page that users must go 
through to get to the off-limits areas. 


HTML E6 
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Figure E-6 A protected structure 
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The same website design principles apply to the protected section as the regular, open 
section of the site. As always, you want to create and maintain detailed storyboards to 
improve your site’s performance and accessibility to all users. 
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Introducing XHTML 


In these tutorials, you have worked with documents written to 
correspond with the specifications of HTML 5. However, other 
versions of HTML have applications both on the web and in the 
business world. One of these versions is XHTML. To understand 
what XHTML is, you will look at the XML language first. 


XML 


Extensible Markup Language or XML is a language for designing 
specialized markup languages called XML vocabularies, which 
can be used for a variety of document needs. Some popular XML 
vocabularies include MathML for mathematical content, CML for 
documenting chemical structures, and MusicML for describing 
musical scores. Individual users and businesses can also create 
markup languages tailored for their specific needs. The content 
of XML documents resembles what you have seen for HTML 
documents in which content is marked with element tags that can 
contain element attributes. For example, the following code is 

an excerpt from a MusicML document describing Mozart’s Piano 
Sonata in A Major: 


<work> 
<work-number>K. 331</work-number> 
<work-title>Piano Sonata in A Major</work-title> 


</work> 

<identification> 
<creator type="composer">Wolfgang Amadeus 
Mozart</creator> 


<rights>Copyright 2018 Recordare LLC</rights> 
</identification> 


XHTML is another XML vocabulary in which the content and 
structure is written in XML but uses the tags and attributes 
associated with HTML. However, the structure of an XHTML 
document differs from an HTML document in ways you will 
explore next. 


There are no starting Data Files needed for this appendix. 


HTML F1 


Ny =HTML 5 and CSS | Appendix F Page Validation with XHTML 


Starting an XHTML Document 


All XML documents, and thus all XHTML documents, must begin with a prolog that 
indicates the document adheres to the syntax rules of XML. The form of the XML 
prolog is 


<?xml version="value" encoding="type" ?> 


where the version attribute indicates the XML version of the document and the 
encoding attribute specifies its character encoding. For XHTML documents, set the 
version to “1.0”. The encoding depends on the character set being used. For example, 
if a document is saved using the UTF-8 character set, you would start the XHTML 
document with the following prolog: 


<?xml version="1.0" encoding="UTF-8" ?> 


With XHTML documents, you can define the character encoding within the XML 
prolog or with the following meta element, added to the document head 


<meta http-equiv="Content-type" content="text/html;charset=type" /> 
where type is once again the character encoding. Thus, the meta element 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" /> 


defines the content type as using the UTF-8 character set. 


Creating Well-Formed Documents 


Once an XML document has been created, a program called an XML parser checks the 
file for errors in syntax and content. An XML document that employs the correct syntax 
is known as a well-formed document. Browsers usually accept HTML documents that 
violate HTML syntax as long as the violation is not too severe; however, an XML parser 
rejects any XML document that is not well formed. See Figure F—1. 


— FigureF-1 Testing for well formedness 


the parser checks for syntax 
errors in the XML document 


if the document is well formed, 

it is passed by the parser and its 
content is displayed by the 
browser or other XML application 


the document author writes the 
code of the XML document 
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For example, the following code is an example of code that is not well formed 
because it violates the basic rule that every two-sided tag must have both an opening 


and closing tag: 
Not well-formed code: 


<body> 


<hlsWeb Page Title 


</body> 


An XML parser rejects documents that are not well formed and thus the document 
content will not be displayed by the browser. To correct this error and make the code 
well formed, you need to add the closing tag as shown next. 


Well-formed code: 


<body> 


<hl>Web Page Title </h1> 


</body> 


When you write XHTML code, it is important to be familiar with all of the rules 
of proper syntax. Figure F—2 lists seven syntax requirements that all XML documents 
(and therefore all XHTML documents) must follow. 


Figure F-2 Rules for well-formed XML code 


Rule 


Incorrect 


Correct 


Element names must be 
lowercase. 


Elements must be properly 
nested. 


All elements must be closed. 


Empty elements must be 
terminated. 


Attribute names must be 
lowercase. 


Attribute values must be 
quoted. 


Attributes must have values. 


<P>This isa 
paragraph.</P> 
<p>This text is 
<b>bold</p>.</b> 


<p>This is a paragraph. 


This is a line break. 
<br> 
<td COLSPAN="3"> 


<td colspan=3> 


<option selected> 


<p>This is a paragraph.</p> 


<p>This text is 
<b>bold</b>.</p> 


<p>This is a paragraph.</p> 


This is a line break. <br /> 


<td colspan="3"> 


<td colspan="3"s 


<option selected="selected"> 


In addition to the rules specified in Figure F-2, all XML documents must also 
include a single root element that contains all other elements. For XHTML, that root 
element is the html element. You should already be familiar with many of these rules 


because you have been working with well-formed HTML since Tutorial 1. However, on 
older websites, you may find document code that violates this basic syntax but which 
most browsers still support. 

In some older HTML documents, you might find cases of attribute minimization, 
a situation in which an element attribute lacks a value. XHTML does not allow 
attribute minimization so XHTML uses the name of the attribute as the attribute 
value. Figure F—3 lists the minimized attributes found in some HTML documents, 
along with the XHTML-compliant versions of these attributes. 
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Figure F-3 Attribute minimization in HTML and XHTML 


HTML XHTML 

compact compact= "compact" 
checked checked="checked" 
declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer" 

ismap ismap="ismap" 
nohref nohref="nohref" 
noshade noshade="noshade" 
nowrap nowrap="nowrap" 
multiple multiple="multiple" 
noresize noresize="noresize" 


For example, in HTML, the following code can be used to indicate that a radio 
button should be selected by default: 


<input type="radio" checked> 
In XHTML, this code would be rewritten as follows: 
<input type="radio" checked="checked" /> 


Failure to make this change would cause the XHTML document to be rejected as not 
well formed. Note that in HTML, either form is accepted: You can write a minimized 
attribute either with the attribute value or without it. 


Creating Valid XHTML Documents 


In addition to being tested for well formedness, XML documents can also be checked 
to see if they are valid. A valid document is a well-formed document that also contains 
only those elements, attributes, and other features that have been defined for its XML 
vocabulary. For example, if the code 


<body> 
<mainhead>Web Page Title</mainhead> 
</body> 


was entered into an XHTML file, the code would be considered well formed because 

it complies with the syntax rules of XML—but it would not be valid because XHTML 
does not support a mainhead element. To specify the correct content and structure for 

a document, the developers of an XML-based language can create a collection of rules 
called the document type definition or DTD, which are stored either within the XML 
file or externally in a text file known as a DTD file. As shown in Figure F—4, an XML 
parser tests the content of a document against the rules in the DTD file. If the document 
does not conform to those rules, the parser rejects the document as not valid. 
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Figure F-4 Testing for validity 


the parser checks for syntax 
errors in the XML document 
and compares the document 
content with the rules specified 
in the DTD 


if the document is well formed 
and valid, it is passed by the 
parser and displayed by the 
browser or other XML application 


the document author writes the 
code of the XML document 


For example, an XML vocabulary designed for a business might contain elements 
naming each product in its inventory. The DTD for that document could require that each 
product name element be accompanied by an id attribute value and that no products 
share the same name or id. An XML parser would reject any XML document that didn’t 
satisfy those rules, even if the document was well formed. In this way, XML differs from 
HTML, which does not include a mechanism to force web page authors to adhere to 
rules for syntax and content. 


Transitional, Frameset, and Strict DTDs 


There are several different DTDs associated with HTML and XHTML documents. 
Some DTDs represent older versions of HTML. For example, if you want to create a 
document that is validated only against the standards of HTML 5, a DTD is available for 
this purpose. 

For XHTML 1.0, there are three DTDs available for testing the validity of XHTML 
documents: 


¢ transitional DTD: The transitional DTD supports many presentational features of 
HTML, including elements and attributes that have been deprecated in HTML 5. It is 
best used with websites that need to support older standards. 

¢ frameset DTD: The frameset DTD is used for documents containing frames, as well 
as deprecated elements and attributes. It is best used with older websites that rely 
on frames. 

¢ strict DTD: The strict DTD does not allow for any deprecated HTML elements 
and attributes, and it does not support frames or inline frames. It is best used for 
documents that must conform strictly to the latest standards. 


All three DTDs require that every valid XHTML document include the following 
elements: html, head, title, and body. If these elements are omitted, the document 
will be rejected by the XML parser. 
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There are elements that are allowed in one DTD but not in another. For example, 
the following elements are allowed under the transitional DTD but they are not 
allowed under the strict DTD for XHTML 1.0: 


¢ applet 
° basefont 
center 
° dir 
° font 
e isindex 
° menu 
© noframes 
es 
° strike 
eu 
In addition to using these elements in the transitional DTD, you often will encounter 
them in older websites. 
The frameset DTD supports these elements as well as the frame, frameset, and 
noframes elements. Therefore, the following code, which uses the deprecated font 
element and color attribute, 


<font color="red">Wizard Works</font> 


would be considered valid code under the transitional and frameset DTDs but not 
under the strict DTD. 

In addition to prohibiting the use of certain elements, the strict DTD also requires 
a particular document structure. For example, you cannot nest a block-level element 
within an inline element. Figure F—5 lists the prohibited child elements under the 


strict DTD. 
Figure F-5 Child elements prohibited under the XHTML strict DTD 

Element Prohibited Children 

inline elements any block-level element 

body a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, 
input, kbd, label, map, object, g, samp, select, small, span, strong, sub, 
sup, textarea, tt, var 

button button, form, fieldset, iframe, input, isindex, label, select, textarea 

blockquote a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, img, 
input, kbd, label, map, object, gq, samp, select, small, span, strong, sub, 
sup, textarea, tt, var 

form a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, form, i, img, kbd, 
map, object, gq, samp, small, span, strong, sub, sup, tt, var 

label label 

pre big, img, object, small, sub, sup 


Thus, the following code would be disallowed under the strict DTD because it 
places an inline image as a child of the body element: 


<body> 
<img src="logo.jpg" alt="Wizard Works" /> 
</body> 
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However, you could make this code compliant with the strict DTD by placing the 
inline image within a paragraph, as follows: 


<body> 

<p> 
<img src="logo.jpg" alt="Wizard Works" /> 

</p> 

</body> 


The goal of this rule is to enforce the inline nature of the img element. Because an 
inline image is displayed inline within a block element such as a paragraph, it should 
not be found outside of that context. For the same reason, form elements (such as the 
input or select elements) should be found only within a form, not outside of a form, 
under the strict DTD. 


The Valid Use of Attributes 


DTDs also include different rules for attributes and their use. Under the strict DTD, 
deprecated attributes are not allowed. A list of these prohibited attributes with their 
corresponding elements is displayed in Figure F—6. 


Figure F-6 Attributes prohibited under the XHTML strict DTD 


Element Prohibited Attribute(s) 

a target 

area target 

base target 

body alink, bgcolor, link, text, vlink 
br clear 

caption align 

div align 

dl compact 

form name, target 

hn align 

hr align, noshade, size, width 
img align, border, hspace, name, vspace 
input align 

li type, value 

link target 

map name 

object align, border, hspace, vspace 
ol compact, start 

p align 

pre width 

script language 

table align, bgcolor 

td bgcolor, height, nowrap, width 
th bgcolor, height, nowrap, width 
tr bgcolor 


ul type, compact 
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Many of the attributes listed in Figure F—6 are called presentational attributes because 
they define how browsers should render the element. Note that all of the attributes 
listed in Figure F—6 are supported in the transitional and frameset DTDs. Therefore, the 
following code, which uses the align attribute to float an inline image on the left margin 
of the page, would not be valid under the strict DTD because the align attribute is 
prohibited; however, it would be allowed under the frameset and transitional DTDs. 


<img src="logo.jpg" alt="Wizard Works" align="left" /> 


The strict DTD also requires the use of the id attribute in place of the name attribute for 
several elements. For example, the following tag that you might see in older HTML code 


<img name="logo" alt="logo image" /> 
would be written in XHTML under the strict DTD using the id attribute as follows: 
<img id="logo" alt="logo image" /> 


Whereas some attributes are prohibited, others are required. A list of the required 
attributes and the elements they are associated with is shown in Figure F—7. 


Figure F-7 Required attributes for XHTML elements 


Element Required Attribute(s) 
applet height, width 
area alt 

base href 
basefont size 

bdo dir 

form action 

img src, alt 

map id 

meta content 
optgroup label 

param name 

script type 

style type 
textarea cols, rows 


For example, an inline image is valid only if it contains both the sre and alt 
attributes, and a form element is valid only if it contains an action attribute. 

Although the list of rules for well-formed and valid documents may seem long and 
onerous, these rules simply reflect good coding practice. You would not, for example, 
want to create an image map without an ID or an inline image without alternate text. 


Inserting the DOCTYPE Declaration 


To specify which DTD is used by an XML document, you add the following DocTYPE 
declaration directly after the XML prolog 


<!DOCTYPE root type "id" "url"> 


where root is the name of the root element of the document, type identifies the type 
of DTD (either PUBLIC or SYSTEM), id is an id associated with the DTD, and uri is the 
location of an external file containing the DTD rules. For XHTML documents, you set 
the root value to html and the type value to PUBLIC. 
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Figure F-8 lists the complete DOCTYPE declarations for different versions of HTML 
and XHTML. Note that you can validate a document not only against different versions 
of XHTML 1.0, but even against different W3C specifications for HTML; this can be 
beneficial if you need to develop code for older browsers that do not support current 
standards. You can access the most recent versions of these DTDs on the W3C website. 


Figure F-8 DTDs for different versions of HTML and XHTML 


DTD DOCTYPE 
HTML 4.01 strict <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 


/www.w3.org/TR/html4/strict.dtd"> 
HTML 4.01 transitional <!DOCTYPE html PUBLIC 


"-//W3C//DTD HTML 4.01 Transitional//EN" 


Y 
:/ 
Y 
Cc 
"http: //www.w3.org/TR/htm14/loose.dtd"> 
HTML 4.01 frameset <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http: //www.w3.org/TR/html4/frameset .dtd"> 
HTML 5 <!DOCTYPE html> 
XHTML 1.0 strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtmlil-strict.dtd"> 
XHTML 1.0 transitional <!DOCTYPE html PUBLIC 
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
XHTML 1.0 frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 
XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http: //www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
XHTML 5 <!DOCTYPE html> 


Setting the XHTML Namespace 


As noted earlier, XHTML is only one of hundreds of XML vocabularies. In some 
situations, a document author may want to combine elements and attributes from 
different vocabularies in the same document. For example, a mathematician might 
want to create a single document that combines elements from both the XHTML and 
MathML vocabularies. Each element or attribute that belongs to a particular language 
is part of that language’s namespace. There are two types of namespaces: default and 
local. For now, you will focus only on the default namespace. A default namespace is 
the namespace that is assumed to be applied, by default, to any element or attribute 
in the document. To declare a default namespace, you add the following xmlns (XML 
namespace) attribute to the root element of the document 


<root xmlns="namespace"> 


where namespace Is the namespace id. Every XML vocabulary has a unique namespace 
id. For example, if you wish to declare that the elements in your document belong to 
the XHTML namespace by default, you add the following attribute to the html element: 


<html xmlns="http://www.w3.org/1999/xhtml1"> 


The namespace id for XHTML looks like a URL but it is not treated as one by 

XML parsers. The id can actually be any string of characters as long as it uniquely 
identifies the document namespace. For XHTML 1.0, it was decided by the W3C to 
use http://www.w3.org/1999/xhtml as the unique identifier. 
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Even if you don’t intend to combine different XML-based languages within the same 
document, it is still a good idea to add a namespace to an XHTML file to explicitly 
identify the XML vocabulary in use. In practical terms, though, an XHTML document is 
still interpretable by most browsers without a namespace. 


Validating a File on the Web 


Once you have created an XHTML or HTML document, you can check it for well 
formedness and validity using any one of the validators available on the web. One such 
validator is located at the W3C website: https://validator.w3.org. To use the validator: 


1. Go to https://validator.w3.org in your browser. 
2. Choose the location of your file: 
a. For a page on the web, click the Validate by URI tab and enter the address of 


the page. 

b. For a file on your computer, click the Validate by File Upload tab, click the 
Choose File button, then locate and select the file on your computer. 

c. For code you wish to enter directly, click the Validate by Direct Input tab and 


enter the markup code in text box. 
3. Click the Check button to run the validator. 


Figure F—9 shows part of an XHTML document that can be tested against the W3C 
validator. 


Figure F-9 Contents of an XHTML file 


XML prolog <?xml version="1.8" encoding="UTF-8" ? 
DTD for XHTML 1.0 : IDOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" 
| 
strict “http: //wew.w3.org/TR/xhtmL1/DTD/xhtmli-strict.dtd"™> XHTML 1.0 
namespace 


chtml xmlns="http: //wew.w3. 
meta element head> 
indicating the <meta http-equiv="Content-type" content a 
character encoding <titleowizard works</title> 
<link href="ww.css" rel="stylesheet" type="text 


/head> 


body bgcolor="whit 


<div id="head"> 
<img src 4 
<a href="8">Review Cart<«/a>» 
<a href="#">Check Out</a> 
/div> 


When tested by the validator using the XHTML Strict DTD, the W3C validator returns 
the results shown in Figure F—10. 
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Figure F-10 Results for an invalid document 
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A total of three errors are reported by the validator. The first error is on Line 13: 
Error Line 13, Column 18: there is no attribute “bgcolor” 


<body bgcolor="white"> 


This is an error because there is no bgcolor attribute for the body element. Instead, 
the bgcolor attribute, used to define the background color, is a presentational attribute 
that has been deprecated in more recent versions of HTML and XHTML. To correct this 
error, you would have to remove the bgcolor attribute and use a CSS style to define 
the background color. 

The next error is on Line 15: 

Error Line 15, Column 29: required attribute “alt” not specified 


<img src="logo.jpg"> 


This error occurs because the alt attribute is missing from the inline image. To correct 
this error, you would have to specify an alternate text for the inline image. 

The third and final error also occurs on Line 15: 

Error Line 15, Column 30: end tag for “img” omitted, but OMITTAG NO was 
specified 


<img src="logo.jpg"> 
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This error occurs because the improper syntax was used for the one-sided tag. The 
correct syntax for the inline image should appear as 


<img src="logo.jpg" alt="Wizard Works" /> 


with “Wizard Works” used as the alternate text for the logo image and / added to the 
closing tag. 

Once all of these corrections have been made, you should rerun the validator on 
the revised markup code to ensure no other errors exist. As shown in Figure F-11, the 
validator reports a successful test of the markup code. 


Figure F-11 Page that successfully passes validation 
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When your document passes the validation test, you might want to make a note of 
this fact in the body of your web page. The W3C provides code that you can paste into 


your document to let others know that your document matches all of the validation tests. 


Conclusion 


Browsers are very forgiving of lapses in syntax. In fact, this is one of the reasons that 
non-programmers were able to quickly create their own web pages in the early days of 
the web. 

You may wonder if it is really important to validate a document and follow syntax 
rules when browsers are so accommodating. In fact, there are several good reasons to 
enforce syntax rules and follow good coding practices: 


e Although many browsers accommodate variations in syntax, not all browsers do so 
and not always in the same way, which can result in varying display results when 
using different browsers. However, when you follow the syntax rules of the W3C, all 
browsers enforce those rules and in the same way. 

¢ Web pages tend to be rendered more quickly when they use good syntax because 
browsers don’t have to interpret poorly written code. 
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e If a browser renders one of your pages incorrectly, it is easier to debug the page if it 
is written in compliance with standard syntax. Many web developers do a validation 
check as part of the debugging process to locate errors in the code. 

¢ In a working group where several people are tasked with maintaining the same web- 
site code, you need to have a common set of rules to avoid confusion and mistakes. 
So, for collaboration purposes, it is best to use the rules set down by the W3C. 

e Even if you are writing your document in HTML, your business might also need to 
create XML-based documents. Given the similarity between the two markup lan- 
guages, it is easier for everyone to use the same set of syntax rules. 


Thus, even if you are writing your code in HTML rather than XHTML, it may be best 
to follow the syntax rules of XHTML. This does not mean you have to run a validation 
check every time or add a namespace or an XML prolog to your document, but you 
should use XHTML standards such as lowercasing element and attribute names, and 
you should always provide attribute values enclosed within quotes. 


HTML 5 and CSS, 8th Edition, Comprehensive 


ee GLOSSARY 


Jimportant CSS keyword that forces a particular 
style to override the default style sheet cascade. 
HTML 96 


@charset CSS rule defining the character 
encoding used in a style sheet. HTML 86 


@font-face CSS rule that defines a web font. 
HTML 108 


@import CSS rule used to import a style sheet file 
into the current style sheet. HTML 98 


@keyframe CSS rule that defines key frame styles 
used in an animation. HTML 641 


@page CSS rule that defines the size and 
margins of the printed page. HTML 418 


<a> HTML tag that marks a hypertext link to an 
external resource. HTML 46 


<body> HT! 
HTML 2 


<cite> HT 


L tag that marks the document body. 


L tag that marks a citation. HTML 22 


<em> HTML tag that marks emphasized text. 
HTML 22 


<h1> HTML tag that marks a major heading. 
HTML 22 


<head> HTML tag that marks the document head 
within an HTML file. HTML 2 


<html> HTML tag that marks the beginning of 
the HTML document. HTML 2 


<img> HTML tag that marks an image using 
the file specified in the src attribute. 
HTML 22 


<li> HTML tag that marks a list item. HTML 46 


<meta> HTML tag that marks metadata 
containing information about the document. 
HTML 2 


<nav> HTML tag that marks a list of hypertext links 
used for navigation. HTML 46 


<p> HTML tag that marks a document paragraph. 
HTML 22 


<strong> HTML tag that marks text of major 
importance or seriousness. HTML 22 


<title> HTML tag that marks the page title, 
which appears in the browser title bar or browser 
tab. HTML 2 


<ul> HTML tag that marks an unordered list. 
HTML 46 


3D transformation A transformation that involves 
three spatial axes. HTML 332 


A 
AAC. See Advanced Audio Coding 


absolute path A folder path that starts from the 
root folder and processes down the entire folder 
structure. HTML 61 


absolute positioning A layout technique that 
places an element at specified coordinates within 
its container element. HTML 238 


absolute unit Units that are fixed in size 
regardless of the output devices. HTML 123 


access key A single key on the keyboard that 
can be pressed in conjunction with another key 
to jump to a location on the web page. 

HTML 531 


Accessible Rich Internet Application (ARIA) An 
HTML standard that assists screen readers in 
interpreting web page content. HTML 44 


action HTML attribute that indicates 
the server program that processes a web form. 
HTML 518 


active CSS pseudo-class that selects actively- 
clicked links. HTML 136 


adaptive technology Technology that enables 
people with disabilities to use the web. HTML D2 


Advanced Audio Coding (AAC) A standard audio 
coding for all Apple products, as well as YouTube 
and several gaming systems. HTML 608 


after CSS pseudo-element that selects page 
space directly after the element. HTML 136 


align WEBVTT attribute that aligns the text 
within a track cue. HTML 618 


American Standard Code for Information 
Interchange. See ASCII (American Standard Code 
for Information Interchange) 


animation CSS style that applies a key frame 
animation to an object. HTML 641 


animation-play-state CSS style that defines 
whether an animation is running or is paused. 
HTML 641 


ARIA. See Accessible Rich Internet Application 
(ARIA) 


array A collection of JavaScript values organized 
under a single name. HTML 752 


array literal JavaScript syntax that defines 
an array using a comma-separated list of 
values within a set of square brackets. 
HTML 758 


ASCII (American Standard Code for Information 
Interchange) The character set used for the 
English alphabet. HTML 33 


assignment operator An operator that assigns a 
value to an item. HTML 720 


assistive technology Technology that enables 
people with disabilities to use the web. HTML D2 


asymmetric transition A transition in which the 
initial state to end state transition is not the 
reverse of the end state to initial state transition. 
HTML 652 


attribute minimization Element attributes that 
do not require an attribute value. HTML 11 


audio HTML element that embeds an audio file 
in the web page. HTML 602 


augmented linear structure A linear structure in 
which each page contains an additional link to the 
opening page of the structure. HTML E2 


B 


background CSS property that defines all 
background options, including the use of multiple 
backgrounds. HTML 274 


background-color CSS property that sets the 
background color. HTML 86 


background-image CSS property that applies an 
image file to the element background. HTML 274 


before CSS pseudo-element that selects page 
space directly before the element. HTML 136 


binary operator An operator that works with two 
operands. HTML 720 


bitmap image An image format in which the 
image is comprised of pixels that can be 
marked with different colors. HTML 280 


BOM. See browser object model 


Boolean value A data type whose values are 
limited to true or false. HTML 710 


border The part of the box model that surrounds 
the padding space. HTML 143 


border CSS property that adds a border around 
all sides of an element. HTML 274 


border box model A layout model in which the 
width property refers to the width of the element's 
content, padding, and border spaces. HTML 197 


border-collapse CSS attribute that specifies 
which table borders are separated or collapsed 
into each other. HTML 453 
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border-image CSS property that defines an 
image file to create a graphic border. HTML 274 


border-left CSS property that adds a border to 
the left edge of an element. HTML 274 


border-radius CSS property that creates 
rounded corners with a specified radius. HTML 274 


border-right CSS property that adds a border 
to the right edge of an element. HTML 274 


box model A layout model in which element 
content is surrounded by padding, border, and 
margin spaces. HTML 143 


box- shadow CSS property that adds a drop 
shadow to a block element. HTML 302 


breakpoint A location in the program code where 
the browser will pause the program, allowing the 
programmer to determine whether an error has 
already occurred in the script’s execution. 

HTML 694 


browser extension An extension to CSS 
supported by a specific browser. HTML 92 


browser object An object that is part of the web 
browser. HTML 700 


browser object model (BOM) A hierarchical 
structure that defines the relationship of the 
object within the web browser. HTML 700 


browser style A style built into the web browser 
itself. HTML 89 


built-in object An object that is intrinsic to the 
JavaScript language. HTML 700 


Cc 


calendar control A web form control for selecting 
date and time values. HTML 520 


caption HTML element that marks a web table 
caption. HTML 452 


caption-side CSS property that specifies the 
location (top or bottom) of the web table caption. 
HTML 453 


Cascading Style Sheets (CSS) A style sheet 
language supported by the W3C and used in web 
page design. HTML 32 


case statement. See switch statement 
CGI. See Common Gateway Interface 


character encoding The process by which the 
computer converts text into a sequence of bytes 
and then converts those bytes back into 
characters. HTML 17 


character entity reference An HTML string that 
inserts a character based on a defined name. 
HTML 22 


character set A collection of characters and 
symbols, HTML 33 


check box A web form control used for selecting 
data limited to two possible values. HTML 520 


checkbox HTML element that marks a check box 
control. HTML 544 


child element An element contained within a par- 
ent element. HTML 110 


clear CSS property that displays an element only 
when the left, right, or both floated objects have 
been cleared. HTML 176 


client A device that receives network information 
or services. HTML 4 


client-server network A network in which clients 
access information provided by one or more 
servers. HTML 4 


client-side image map An image map that is 
defined within the web page and handled entirely 
by the web browser. HTML 341 


client-side programming The programming 
environment in which program code is run locally 
on the user's computer with scripts that are 
downloaded from the server. HTML 684 


client-side validation Validation that takes place 
in the user's browser. HTML 575 

closing tag The tag that marks the end of the 
element content. HTML 2 

codec A computer program that encodes and 
decodes streams of data. HTML 604 


col HTML element that marks individual columns 
in a web table. HTML 476 


colgroup HTML element that marks groups of 
columns in a web table. HTML 476 


color CSS property that sets the text color. 
HTML 56 


color gradient A background in which one color 
gradually blends into another color. HTML 312 
color picker A web form control for choosing 
color values. HTML 520 


color value A numeric expression that defines a 
color. HTML 99 


color-stop A parameter of a color gradient that 
defines the extent of the color. HTML 302 


colspan HTML attribute that indicates a table 
cell should cover several columns. HTML 452 

command block A set of JavaScript commands 
enclosed within a set of curly braces. HTML 773 


command button A web form button that runs a 
program. HTML 572 


Common Gateway Interface (CGI) A server- 
based program, written in Perl, used for 
processing web form data. HTML 522 


compare function A function used with the 
JavaScript sort () method to define a sorting 
order. HTML 764 


comparison operator An operator that compares 
the value of one expression to another, returning a 
Boolean value indicating whether the comparison 

is true or not. HTML 776 


compiler A software program that translates 
program code into machine language. HTML 685 


conditional comment An Internet Explorer 
extension that encloses content that should only 
be run by particular versions of Internet Explorer. 
HTML 20 


conditional expression An expression that is 
either true or false. HTML 786 


conditional operator An operator used in an 
expression that returns one value if the condition 
is true and another if it is false. Also called ternary 
operator. HTML 791 


conditional statement A statement that runs a 
command or command block only when certain 
circumstances are met. HTML 789 


container An object that handles the packaging, 
transportation, and presentation of multimedia 
data. HTML 604 


container collapse A layout challenge that occurs 
when an element contains only floated content 
and thus collapses in height. HTML 201 


content CSS property that inserts content into a 
page element. HTML 136 


content box model A layout model in which the 
width property only refers to the width of the 
element content. HTML 197 


content-box CSS keyword that specifies the 
background extends only over the element 
content. HTML 274 


contextual selector A selector that specifies the 
context under which a particular page element is 
matched. HTML 110 


continue expression The Boolean expression in 
a for loop that must be true for the loop to 
continue. HTML 770 


continue statement JavaScript statement that 
stops the processing of the commands in the 
current iteration of the loop and continues to the 
next iteration. HTML 806 


control An object within a web form that allows 
users to interact with the form. HTML 520 


controls HTML attribute that displays player 
controls for a multimedia clip. HTML 602 


counter variable A variable within a for loop 
that changes value each time the loop is run. 
HTML 770 


cover CSS keyword that specifies that the 
background image should completely cover 
the background. HTML 274 


cross axis The flexbox axis that is perpendicular 
to the main axis. HTML 394 


CSS. See Cascading Style Sheets (CSS) 


CSS at-rule CSS rule that directs how the browser 
should interpret and parse the CSS code. 
HTML 98 


CSS grid model A set of CSS design styles to 
create grid-based layouts. HTML 210 


CSS pixel A pixel that is the fundamental unit in 
CSS measurements. HTML 375 


CSS The third, and most current version, of CSS. 
HTML 88 


cue HTML pseudo-element that selects the cues 
from a media track. HTML 619 


cursive A typeface that mimics handwriting with 
highly stylized elements and flourishes. HTML 118 


customized object An object that is created by 
the programmer for use in an application. 
HTML 700 


D 


data attribute HTML attribute that stores 
customized data. HTML 494 


data field The part of a web form in which data 
values are stored. HTML 521 


data list A list of possible values that a form field 
can have. HTML 569 


data type The type of information stored within a 
variable including numeric values, text strings, 
Boolean values, objects, and null values. 

HTML 710 


datalist HTML element that defines a set of 
suggested field values. HTML 562 


Date object JavaScript object used for storing 
date and time values. HTML 711 


debugging The process of locating and fixing a 
programming error. HTML 692 


declaring The process by which a variable is 
introduced and defined. HTML 709 


decrement operator A unary operator that 
decreases the value of the operand by 1. 
HTML 720 
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default namespace The namespace that is 
assumed to be applied to any element or 
attribute in the document. HTML F9 


deprecated The features and code from earlier 
HTML versions that have been phased out and 
are either no longer supported or developed. 
HTML 6 


descendant element An element that descends 
from a parent element within the document 
hierarchy. HTML 110 


description list A list of terms and matching 
descriptions. HTML 51 


device pixel A pixel that refers to the actual 
physical pixel on a screen. HTML 375 


device-pixel ratio A measure of the number of 
device pixels matched to a single CSS pixel. 
HTML 375 


display CSS property that defines how an ele- 
ment should be laid out. HTML 176 


do/while loop A program loop in which a 
stopping condition is tested right after the last 
command block is run. HTML 775 


document body The part of an HTML file 
containing all of the content that will display in 
the web page. HTML 2 


document head The part of an HTML file 
containing information about the document. 
HTML 2 


document object An object that is part of the 
web page document. HTML 700 


document object model (DOM) A hierarchical 
structure that defines the relationship of the 
object within the web document. HTML 700 


document type declaration A processing 
instruction indicating the markup language used 
in the document. HTML 2 


document type definition A collection of rules 
for an XML vocabulary that defines the content 
and structure of a valid document in that 
vocabulary. HTML F4 


DOM. See document object model 


domain name The server name portion of a URL. 
HTML 65 


drop cap A design element in which the initial 
letter in a body of text drops down into the text 
body. HTML 193 


DTD. See document type definition 


DTD file A text file in which a DTD is stored. 
HTML F4 


dynamic pseudo-class A pseudo-class based on the 
actions of the user within the element. HTML 152 


REF 3 


E 


elastic layout A layout in which all measurements 
are expressed in em units and based on the 
default font size. HTML 183 


element attribute The part of an element that 
provides information to the browser about the 
purpose of the element or how the element 
should be handled by the browser. HTML 11 


element tag The fundamental building block of 
an HTML file, used to mark every document 
element. HTML 9 


em CSS relative unit of length that expresses a 
size relative to the font size of the containing 
element. HTML 106 


email harvester An automated program that 
scans web pages for e-mail addresses. HTML 67 


embedded content Content that is imported from 
another resource, often nontextual. HTML 36 


embedded element An element containing 
embedded content such as graphic images, audio 
soundtracks, video clips, or interactive games. 
HTML 36 


embedded object An object, such as a graphic 
image or media clip, that appears within a web 
page. HTML 605 


embedded script A program script that is loaded 
within the HTML file. HTML 686 


embedded style A style added to the head of an 
HTML file. HTML 89 


empty element An element that is either 
nontextual or contains directives to the browser 
about how the page should be treated. HTML 9 


ending tag The tag that marks the end of the 
element content. HTML 9 


explicit grid A grid in which the number and size 
of the rows and columns are defined within the 
CSS style sheet. HTML 216 


Extensible Markup Language A language for 
designing specialized markup languages. HTML F1 


extension The top level of a URL, indicating the 
general audience supported by the web server. 
HTML 65 


external style A style created by the page author 
and placed into a CSS file and linked to the page. 
HTML 89 


F 


fantasy A highly ornamental typeface used for 
page decoration. HTML 118 


field The part of a web form in which data values 
are stored. HTML 521 
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field set A web form feature that groups fields 
that share a common characteristic or purpose. 
HTML 525 


fieldset HTML element that groups fields 
within a web form. HTML 518 


FIFO. See first-in first-out 


Free Lossless Audio Codec (FLAC) A free open- 
source digitial music format that offers bit-perfect 
copies of CD-quality music at half the size 

HTML 608 


filter CSS property used to modify an object’s 
color, brightness, contrast, or general purpose. 
HTML 326 


first-in first-out (FIFO) A data structure principle 
in which the first item added to an array is the 
first one removed. HTML 766 


first-of-type CSS pseudo-class that selects the 
first element type of the parent element. HTML 136 


fixed grid A grid layout in which the widths of the 
columns and margins are specified in pixels with 
fixed positions. HTML 209 


fixed layout A layout in which the size of the 
page and the page elements are fixed, usually 
using pixels as the unit of measure. HTML 182 


FLAC. See Free Lossless Audio Codec 


flex CSS property that defines the size of the flex 
items and how they will grow or shrink in response 
to the changing size of the flexbox. HTML 392 


flex-basis CSS property that provides the basis 
or initial size of the item prior to flexing. HTML 392 


flexbox A box that contains items whose sizes 
automatically expand or contract to match the 
dimensions of the box. HTML 392 


£lex- flow CSS property that defines the orienta- 
tion of the flexbox and whether items can wrap to 
anew line. HTML 392 


flex-grow CSS property that specifies how fast 
the item grows above its basis size relative to 
other items in the flex box. HTML 392 


flex-shrink CSS property that specifies how 
fast the item shrinks below its basis size relative 
to other items in the flex box. HTML 392 


float CSS property that takes an object out of 
normal document flow and floats it on the left or 
right margin of its container element. HTML 176 


floating A design technique in which an element 
is taken out of its default document position and 
placed along the left or right edge of its parent 
element. HTML 189 


fluid grid A grid layout in which the widths of the 
columns and margins are specified in percentages. 
HTML 209 


fluid layout A layout in which the size of the page 
elements are set using percentages. 
HTML 183 


focus The state in which an element has been 
clicked by the user, making it the active control 
on the web form. HTML 582 


font Definition of the style and appearance of 
each character in an alphabet. HTML 117 


font stack A list of fonts defined in the font-family 
property. HTML 117 


font-family CSS property that defines a font 
stack. HTML 108 


font-size CSS property that sets the text size. 
HTML 108 


for HTML attribute that associates a label with 
an input control. HTML 518 


for loop A programming structure in which a set 
of commands is repeated based on the changing 
values of a counter variable. HTML 770 


form HTML element that encloses a web form. 
HTML 518 


form button A button on a web form that can be 
clicked to either run, submit, or reset the form. 
HTML 572 


fr (fractional) unit CSS grid unit that represents 
a fraction of the available space left on the grid 
after all other rows and columns have attained 
their maximum allowable size. HTML 217 


frameset DTD The DTD used by XHTML that 
supports frames and those HTML features that 
were deprecated in HTML 5. HTML F5 


framework A software package that provides a 
library of tools to design a website. HTML 210 


Free Lossless Audio Codec (FLAC) A free, open- 
source digital music format that offers bit-perfect 
copies of CD-quality music at half the size of 
other formats. HTML 608 


function A collection of JavaScript commands that 
performs an action or returns a value. HTML 730 


G 


generic font A general description of a font face. 
HTML 117 


get method HTML method applied to web forms 
that tells the browser to append the form data to 
the end of the URL specified by the action attri- 
bute. HTML 523 


getElementById() JavaScript method that 
selects a web page element based on its ID value. 
HTML 698 


getFullYear() JavaScript method that gets the 
4-digit year value from a Date object. HTML 718 


GIF (Graphic Interchange Format) The oldest 
bitmap image format, limited to 256 colors, but 
that also supports transparent colors and 
animated images. HTML 280 


global scope The scope of a variable that can be 
referenced anywhere within the JavaScript file. 
HTML 733 


global variable A variable with global scope. 
HTML 733 


grid area A region that covers several rows and/ 
or columns with a grid layout HTML 206. 


grid cell A cell at the intersection of a grid row 
and grid column. HTML 224 


grid column A column floated within the rows of 
a grid row. HTML 206 


grid layout A layout that arranges the page 
within grid rows with grid columns floated inside 
those rows. HTML 208 


grid row A row found within a grid layout. 
HTML 206 


grid tracks Rows or columns within a grid layout 
HTML 211. 


gridline names Descriptive names for row and 
column gridlines in the CSS grid model. HTML 226. 


grouping element An element that organizes 
similar content into a distinct group, much like a 
paragraph groups sentences that share a 
common theme. HTML 26 


H 


H.264 A video codec that is the industry standard 
for high-definition video streams. HTML 620 


hanging indent A layout in which the first line 
extends to the left of the block. HTML 128 


hexadecimal number A number expressed in the 
base 16 numbering system. HTML 100 


hidden field A web form field that is not 
displayed within the web form. HTML 552 


hierarchical structure A website structure in 
which the home page links to pages dedicated to 
specitic topics, which are linked to even more 
specific topics. HTML E2 


host Any network device that is capable of send- 
ing and/or receiving data electronically. HTML 4 


hotspot A region within an image that can be 
linked to a specific URL. HTML 341 


hover CSS pseudo-class that selects links that are 
being hovered over. HTML 136 


HSL color value Color defined by its hue, 
saturation, and lightness values. HTML 86 


HTML 5 The latest version of HTML, compatible 
with earlier HTML releases. HTML 5 


HTML 5 Shiv A script that provides support for 
HTML 5 in older browsers. HTML 39 


HTML (Hypertext Markup Language) A markup 
language that supports the tagging of distinct 
document elements and connecting documents 
through hypertext links. HTML 5 


HTML 4.01 The fourth version of HTML, 
released in 1999, that provided support for 
multimedia, online commerce, and interactive 
scripts. HTML 5 


HTML comment A descriptive note added to an 
HTML file that does not get rendered by a user 
agent. HTML 2 


HTTP. See Hypertext Transfer Protocol (HTTP) 


hue The tint of a color, represented by a direction 
on the color wheel. HTML 101 


hyperlink A link within a hypertext document 
that can be activated to access a data source. 
HTML 4 


hypertext A method of organizing information in 
which data sources are interconnected through a 
series of hyperlinks that users activate to jump 
from one data source to another. HTML 5 


Hypertext Markup Language. See HTML 
(Hypertext Markup Language) 


Hypertext Transfer Protocol (HTTP) The protocol 
used by devices on the web. HTML 64 


IANA. See Internet Assigned Numbers Authority 
(IANA) 


IDE (Integrated Development Environment) A 
software package providing comprehensive 
coverage of all phases of the HTML development 
process. HTML 6 


if else statement JavaScript conditional expres- 
sion that runs a specified command if the condi- 
tion is true and a different command if the 
condition is false. HTML 786 


if statement JavaScript conditional expression 
that runs a specified command if the condition is 
true. HTML 786 


iframe HTML element used to insert windows 
showing external content within a web page. 
HTML 637 


image map Information that specifies the location 
and URLs associated within each hotspot within 
an image. HTML 341 


implicit grid A grid in which the number and size 
of the rows and columns are determined by the 
browser as it populates the grid with content 
from the grid container. 
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increment operator A unary operator that 
increases the value of the operand by 1. 
HTML 720 


index A number used with an array to distinguish 
one array value from another. HTML 757 


inline element An element in which the 
content is placed in line with surrounding page 
content rather than starting on a new line. 
HTML 29 


inline frames Windows within a web page that 
show external content. HTML 637 


inline image An image that is placed, like 
text-level elements, in line with the surrounding 
content. HTML 37 


inline style A style added as attributes of an 
HTML element. HTML 89 


inline validation A technique in which invalid 
data from a web form is highlighted as it is 
entered by the user. HTML 563 


innerHTML JavaScript method that returns or 
defines the HTML code contained within a web 
page element. HTML 698 


input HTML element that creates an input 
control for a web form. HTML 518 


input box A web form control for inserting text 
strings and numeric values. HTML 520 


inset CSS keyword that places a box shadow 
inside the element. HTML 302 


interactive element An element that allows for 
interaction between the user and the embedded 
object. Also called embedded element. 

HTML 36 


Internet A wide area network incorporating an 
almost uncountable number of networks and 
hosts across the world. HTML 4 


Internet Assigned Numbers Authority (IANA) 
The registration authority used to register the top 
levels of every domain name. HTML 65 


interpreted language A computer language in 
which the program code is executed directly 
without requiring a compiler. HTML 685 


ISO 8859-1 An extended version of the ASCII 
character set. HTML 33 


J 


JavaScript A programming language used for 
client-side programs. HTML 685 


JPEG (Joint Photographic Experts Group) A 
bitmap image format that supports a palette of 
over 16 million colors, as well as file compression. 
HTML 280 


K 


kerning A measure of the space between 
characters. HTML 108 


key frames A series of images that are displayed 
in rapid succession to create the illusion of 
motion. HTML 652 


kind HTML attribute that specifies the type of 
text track attached to a media clip. HTML 618 


L 


label HTML element that associates a text string 
with an input control. HTML 518 


LAN. See Local area network (LAN) 


last-in first-out (LIFO) A data structure principle 
in which the last item added to an array is the first 
one removed. HTML 766 


last-of-type CSS pseudo-class that selects 
the last element type of the parent element. 
HTML 136 


Latin-1 An extended version of the ASCII 
character set. HTML 33 


layout viewport The part of the mobile layout 
containing the entire page content. HTML 372 


leading A measure of the amount of space 
between lines of text, set using the line-height 
property. HTML 127 


left CSS property that defines the left 
coordinates of an element placed using relative, 
absolute, or fixed positioning. HTML 238 


legend HTML element that provides the text of a 
field set legend. HTML 518 


letter-spacing CSS property that sets the 
space between letters. HTML 108 


LIFO. See last-in first-out 


lightness The brightness of a chosen color, 
ranging from 0% to 100%. HTML 101 


line WEBVTT attribute that sets the vertical 
position of cue text. HTML 618 


linear structure A website structure in which each 
page is linked with the pages that follow it and 
precede it. HTML E1 


linear-gradient CSS property that creates a 
color gradient proceeding along a straight line. 
HTML 302 


line-height CSS property that sets the height 
of a line. HTML 108 


link CSS pseudo-class that selects unvisited 
links. HTML 136 


list marker A symbol displayed alongside a list 
item. HTML 138 
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list-style-image CSS property that inserts an 
image for the list marker. HTML 136 


list-style-type CSS property that defines the 
appearance of the list marker. HTML 136 


load-time error A program error that occurs 
when the browser initial loads and reads the 
program code. HTML 692 


local area network (LAN) A network confined to 
a small geographic area, such as within a building 
or department. HTML 4 


local scope The scope of a variable that can only 
be referenced within the function in which the 
variable is defined. HTML 733 


local variable A variable with local scope. 
HTML 733 


logical error A program error that is free from 
syntax and executable mistakes but that results in 
an incorrect result. HTML 692 


logical operator An operator that allows you to 
connect several Boolean expressions. HTML 776 


lorem ipsum Nonsensical improper Latin 
commonly used in page design as filler text. 
HTML 232 


lossless compression File compression in which 
redundant data are removed to achieve a smaller 
file size. HTML 604 


lossy compression File compression in which 
nonessential data are removed to achieve a 
smaller file size. HTML 604 


M 


mailto HTML communication scheme used to 
provide the URL for an e-mail link. HTML 46 


main axis The central axis along which items 
within a flexbox are laid out. HTML 394 


margin area The page section that contains the 
space between the printed content and the 
edges of the page. HTML 422 


margin space The part of the box model that 
surrounds the element border, extending to the 
next element. HTML 143 


margin-top CSS property that sets the margin 
space above the element. HTML 136 


markup language A language that describes 
the content and structure of a document by 
tagging different document elements. HTML 5 


Math object JavaScript object used for 
performing mathematical tasks and storing 
mathematical values. HTML 723 


Math. floor () JavaScript method that rounds a 
numeric value down to the next nearest integer. 
HTML 718 


matrix A data structure in which data values are 
arranged in a rectangular grid. HTML 763 


max HTML attribute that specifies the maximum 
value from a range of possible field values. 
HTML 562 


max-width CSS property that defines the maxi- 
mum width of an element. HTML 176 


media player A software program that decodes 
and plays multimedia content. HTML 605 


media query Code used to apply specified style 
rules to a device based on the device type and 
the device features. HTML 362 


metadata Content that describes the document 
or provides information about how the document 
should be processed by the browser. HTML 15 


method An action that can be performed on an 
object. HTML 700 


MIME type. See Multipurpose Internet Mail 
Extension 


min HTML attribute that specifies the minimum 
value from a range of possible field values. 
HTML 562 


min-width CSS property that defines the 
minimum width of an element. HTML 176 


minifying The process of removing unnecessary 
characters from HTML and CSS files in order to 
increase processing speed. HTML 416 


mobile device emulator A software program that 
duplicates the look and feel of a mobile device. 
HTML 379 


mobile first A design principle by which the over- 
all page design starts with base styles that apply 
to all devices followed by style rules specific to 
mobile devices. HTML 370 


modernizr A script that provides support for 
HTML 5 in older browsers. HTML 39 


module A component of CSS that focuses on a 
particular design topic. HTML 88 


modulus operator An operator that returns the 
integer remainder after dividing one integer by 
another. HTML 790 

monospace A typeface in which each character 
has the same width, often used to display pro- 
gramming code. HTML 117 

MP3. See MPEG-1 Audio Layer 3 

MP4. See MPEG-4 


MPEG-1 Audio Layer 3 (MP3) A widely used 
format for digital audio players. HTML 608 
MPEG-4 (MP4) Proprietary video form developed 


by Apple based on the Apple QuickTime movie 
format. HTML 620 


multidimensional array A JavaScript structure in 
which one array is nested within another. 
HTML 763 


multiple HTML attribute that allows for multiple 
selections from a drop-down list. HTML 544 


Multipurpose Internet Mail Extension (MIME) An 
extension that provides a way of attaching 
nontextual content to e-mail messages. HTML 609 


N 


name HTML attribute that provides the name of a 
data field associated with an input control. 
HTML 518 


namespace The part of a document that 
combines several vocabularies that define which 
part of the document belongs to which 
vocabulary. HTML F9 


navicon A symbol, usually represented as three 
horizontal lines, used to hide menu items in 
mobile devices. HTML 412 


navigation list An unordered list of hypertext 
links placed within the nav element. HTML 55 


nested element An element contained within 
another element. HTML 9 


nested list A list that is placed inside another list. 
HTML 50 


network A structure in which information and ser- 
vices are shared among devices known as nodes 
or hosts. HTML 4 


node A network location that can access and 
share information and services. HTML 4 


no-repeat CSS keyword that specifies that no 
tiling should be done with the background image. 
HTML 274 


nth-of-type CSS pseudo-class that selects 
the nth element type of the parent element. 
HTML 136 


number HTML data type for an input control that 
creates a spin box control. HTML 562 


numeric character reference An HTML string 
that inserts a character based on its code value. 
HTML 22 


numeric value A data type for storing numbers. 
HTML 710 


O 


object An entity within the web browser or web 
page. HTML 700 


object collections A group of objects. HTML 701 


object-based language A programming 
language that manipulates an object by changing 
a property or applying a method. HTML 700 


Ogg (audio) An open source and royalty-free 
audio format that provides better sound quality 
than MP3. HTML 608 


Ogg (video) An open source video format devel- 
oped by the Xiph.org Foundation as an alterna- 
tive to the MPEG-4 codec. HTML 620 


one-sided element tag A tag used for empty 
elements, containing no closing tag. HTML 9 


opacity A measure of the solidness of a color, 
ranging from 0 to 1. HTML 102 


opacity CSS property that makes an object 
semi-transparent. HTML 302 


opening tag The tag that marks the start of the 
element content. HTML 2 


operand The variable or expression that 
operators act upon. HTML 720 


operator A symbol used in JavaScript to act upon 
an item or variable within an expression. 
HTML 720 


option HTML element that marks options from a 
selection list. HTML 544 


option button A web form control for selecting 
data from a small predefined list of options. Also 
called radio button. HTML 520 


ordered list A list that is used for items that 
follow some defined sequential order. 
HTML 48 


orphans A property that limits the number of lines 
stranded at the bottom of a page. HTML 418 


outline CSS property that draws a line around 
the selected elements. HTML 221 


overflow CSS property that determines how the 
browser should handle content that exceeds the 
space allotted to the element. HTML 238 


P 


padding space The part of the box model that 
extends from the element content to the element 
border. HTML 143 


padding-box CSS keyword that specifies the 
background extends through the padding space. 
HTML 274 


page area The page section that contains the 
content of the document. HTML 422 


page box The layout definition of the printed 
page. HTML 422 


page-break-before CSS property that inserts 
page breaks before elements. HTML 418 
page-break-inside CSS property that prohibits 
page breaks within an element. HTML 418 
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parallel array An array in which an item matches, 
or is parallel to, another entry in a 
different array. HTML 788 


parameter A variable that is associated with a 
JavaScript function. HTML 730 


parent element An element that contains one or 
more child elements. HTML 110 


pattern HTML attribute that specifies the 
general pattern that characters in a field value 
must follow. HTML 562 


Perl A programming language used with 
server-based programs. HTML 522 


perspective CSS property and a function used 
in 3D transformations to measure how rapidly 
objects appear to recede or approach the viewer. 
HTML 326 


pixel A single dot on the output device. HTML 124 


placeholder HTML attribute that inserts 
descriptive text into an input control. HTML 518 


placeholder A text string that appears within a 
form control, providing a hint about the kind of 
data that should be entered into the field. 
HTML 540 


plug-in A software program accessed by the 
browser to provide a feature not native to the 
browser. HTML 605 


PNG (Portable Network Graphic) A bitmap 
image format designed to replace the GIF format 
with a palette of a million colors. HTML 280 


position WEBVTT attribute that sets the 
horizontal position of cue text. HTML 618 


post method HTML method applied to web 
forms that tells the browser to send the form data 
in its own separate data stream. HTML 523 


poster HTML attribute that displays a preview 
image of a video file. HTML 618 


presentational attribute An attribute that 
describes how page content should be rendered 
by the browser. HTML 36 


presentational element An element that 
describes how page content should be rendered 
by the browser. HTML 36 


print style sheet A style sheet that formats the 
printed version of the web document. HTML 420 


program loop A programming structure in which 
a set of commands is repeated until a stopping 
condition is met. HTML 771 


progressive enhancement A CSS technique in 
which styles that conform to older standards are 
entered first with newer standards placed last. 
HTML 106 
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prolog The first line of an XML document that 
indicates that the document adheres to the 
syntax rules of XML. HTML F2 


property A defining characteristic of an object. 
HTML 700 


protocol A set of rules defining how 
information is passed between two network 
devices. HTML 64 


pseudo-class A classification of an element based 
on its current status, position, or use in the 
document. HTML 149 


pseudo-element An object that exists only in the 
rendered page. HTML 154 


Q 


queue A data structure principle in which items 
are arranged in an array following the first-in 
first-out principle. HTML 766 


quirks mode An operating mode in which the 

browser renders the web page based on styles 
and practices from the 1990s and early 2000s. 

HTML9 


quotes CSS property that defines characters for 
quotation marks. HTML 136 


R 


radial gradient A color gradient proceeding out- 
ward from a central point in a series of concentric 
circles or ellipses. HTML 302 


radial-gradient CSS property that creates a 
color gradient proceeding outward from a central 
point. HTML 302 


radio HTML element that marks an option 
button control. HTML 544 


radio button A web form control for selecting 
data from a small predefined list of options. 
Also called option button. HTML 520 


range HTML data type for an input control that 
creates a range slider control. HTML 562 


read-only property An object property whose 
value cannot be changed. HTML 704 


regex. See regular expression 


regular expression A concise description of a 
character pattern that is used in data validation. 
HTML 578 


relative path A folder path expressed relative 
to the location of the current document. 
HTML 61 


relative positioning A layout technique that shifts 
an element from its default position in the docu- 
ment flow. HTML 238 
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relative unit A unit that is expressed relative to 
the size of other objects within the web page or 
relative to the display properties of the device 
itself. HTML 123 


rem. See Root em unit 


required HTML attribute that indicates a field 
value is required. HTML 562 


reset HTML data type for an input control that 
creates a button that restores the form to its 
default values. HTML 562 


reset button A web form button that resets the 
form, changing all fields to their original default 
values. HTML 572 


reset style sheet A base style sheet that 
supersedes the browser's default styles, providing 
a consisting starting point for page design. 

HTML 178 


responsive design A design principle in which 
the layout and design of the page changes in 


response to the device that is rendering the page. 


HTML 183 


RGB color value Color defined by its red, green, 
and blue components. HTML 86 


RGB triplet A color value indicating the red, 
green, and blue values of a color. HTML 100 


rollover effect An effect in which the page 
appearance changes as the user hovers the 
mouse pointer over a hypertext link. 

HTML 59 


root element The topmost element in an XML 
document that contains all other elements. 
HTML F3 


Root em unit A relative unit of length that 
expresses a size relative to the font size of the 
root element. HTML 124 


Root folder The folder at the top of the folder 
hierarchy, containing all other folders. 

HTML 60 

rowspan HTML attribute that indicates a table 
cell should cover several rows. HTML 452 
run-time error A program error that occurs 

after the script has been loaded, during the 


time when the code is being executed. 
HTML 692 


S 


sans-serif A typeface without any serif ornamen- 
tation. HTML 117 


saturation The intensity of a chosen color, rang- 
ing from 0% to 100%. HTML 101 


scalable The principle by which text is resized 
using relative units. HTML 124 


Scalable Vector Image. See SVG (Scalable Vector 
Image) 


scope The characteristic of a variable that 
indicates where it can be referenced within a 
JavaScript program. HTML 733 


script An external program that is run within the 
browser. HTML 39 


Section 508 A section from the 1973 
Rehabilitation Act that requires any electronic 
information to be accessible to people with 
disabilities. HTML D2 


sectioning element An element used to define 
major topical areas in the document. HTML 24 


select HTML element that creates a drop-down 
list box control. HTML 544 


selected HTML attribute that indicates the 
default option in a selection list. HTML 544 


selection list A web form control for selecting 
data from an extensive list of options. HTML 520 


selector CSS code that defines what element or 
elements are affected by the style rule. HTML 86 


selector pattern A selector that matches only 
those elements that correspond to the specified 
pattern. HTML 110 


semantic element An element in which the 
element name describes the purpose of the 
element and the type of content it contains. 
HTML 24 


serif A typeface in which a small ornamentation 
appears at the tail end of each character. 
HTML 117 


server A host that provides information or a service 
to other devices on the network. HTML 4 


server-side image map An image map that relies 
on a program running on the web server to create 
and manage the map. HTML 341 


server-side programming The programming 
environment in which program code is run from 
the server hosting the website. HTML 684 


server-side validation Validation that takes place 
on the web server. HTML 575 


setFullYear() JavaScript method that sets the 
year value in a Date object. HTML 718 


set Interval () JavaScript method used to 
repeatedly run a command after an interval 
expressed in milliseconds. HTML 718 


sibling selector A selector that matches elements 
based on the elements that are adjacent to them 
in the document hierarchy. HTML 111 


site index A page containing an outline of the 
entire website structure and its contents. 
HTML E4 


size HTML attribute that sets the number 
of visible options in a drop-down list. 
HTML 544 


slider control A web form control for entering 
numeric values confined to a specified range 
that includes a marker the user can drag 
horizontally across a range of possible field 
values. HTML 520 


source HTML element that provides the source 
of a multimedia file. HTML 602 


spaghetti code A pejorative programming term 
that refers to convoluted or poorly written code. 
HTML 808 


spam Unsolicited e-mail sent to large numbers of 
people. HTML 67 


sparse array An array in which some array values 
are left undefined. HTML 761 


specific font A font that is identified by name. 
HTML 117 


spin box A web form control for entering 
integer values confined to a specified range. 
HTML 520 


spinner control A web form control that displays 
an up or a down arrow to increase a field value by 
a set amount. HTML 564 


sprite An animated image that is made from 
several frames shown in rapid succession at timed 
steps. HTML 658 


stack A data structure in which new data items 
are added to the end of an array. HTML 766 


standards mode An operating mode in which 
the browser renders the web page in line 
with the most current HTML specifications. 
HTML 9 


start expression The expression in a for loop 
that provides the starting value of the counter 
variable. HTML 770 


starting tag The tag that marks the start of the 
element content. HTML 9 


statement label A label used to identify a 
statement in the JavaScript code so that you can 
reference those lines elsewhere in the program. 
HTML 807 


static positioning A layout technique that 
places an element where it would have fallen 
naturally within the flow of the document. 
HTML 240 


step HTML attribute that sets the interval 
between values in a data field. HTML 562 


storyboard A diagram of a website's structure, 
showing all of the pages in the site and how they 
are linked together. HTML E1 


strict DTD The DTD used by XHTML that does 
not allow for deprecated elements, attributes, or 
frames. HTML F5 


strict mode A programming mode in which all 
lapses in syntax result in load-time or run-time 
errors. HTML 695 


strongly typed language A programming 
language in which a variable’s data type must be 
explicitly defined. HTML 711 


structural pseudo-class A pseudo-class based on 
the element's location within the structure of the 
HTML document. HTML 149 


style comment Text that provides information 
about the style sheet. HTML 86 


style inheritance The principle by which style 
properties are passed from a parent element to 
its children. HTML 94 


style property CSS code that specifies what 
aspect of the selector to modify. HTML 86 


style rule CSS code that sets the display properties 
of a page element. HTML 84 


style sheet A set of rules defining how page 
elements are displayed. HTML 32 


subarray A section of an array. HTML 765 


submit HTML data type for an input control that 
creates a button used for submitting the form for 
processing. HTML 562 


submit button A web form button that submits 
the form to the server for processing. HTML 572 


SVG (Scalable Vector Image) An XML markup 
language that can be used to create vector 
images. HTML 280 


switch statement A JavaScript statement used 
to run different commands based on different 
values of a specified variable. Also called case 
statement. HTML 796 


symmetric transition A transition in which the 
initial state to end state transition is the reverse of 
the end state to initial state transition. HTML 652 


syntax The rules governing how a language 
should be used and interpreted. HTML 5 


T 


table HTML element that marks a web table. 
HTML 452 


tbody HTML element that marks the row(s) in a 
web table body. HTML 476 


td HTML element that marks a cell containing 
table data. HTML 452 


tel HTML communication scheme used to pro- 
vide the URL for a telephone link. HTML 46 
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ternary operator. See conditional operator 


text area box A web form control for entering 
text strings that may include several lines of 
content. HTML 520 


text string A data type for storing any group of 
characters enclosed within either double or single 
quotation marks. HTML 710 


text-align CSS property that defines the horizon- 
tal alignment of the content of an element. 
HTML 108 


textarea HTML element that marks a text area 
control. HTML 544 


textContent JavaScript method that returns or 
defines the text contained within a web page 
element. HTML 698 


text-level element An element within a grouping 
element that contains strings of the characters or 
page content. HTML 29 


text-shadow CSS property that adds a drop 
shadow to a text string. HTML 302 


tfoot HTML element that marks the row(s) in a 
web table footer. HTML 476 


th HTML element that marks a cell containing 
a table header. HTML 452 


thead HTML element that marks the row(s) in a 
web table header. HTML 476 


Theora A royalty-free video codec that produces 
video streams that can be used with almost any 
container. HTML 620 


tiling A process by which a background image is 
repeated, filling up the background space. 
HTML 281 


time-delayed command A JavaScript command 
that is run after a specific amount of time has 
passed. HTML 734 


toLocaleDateString() JavaScript method that 
returns a text string containing the date using 
ocal conventions. HTML 698 


toLocaleTimeString() JavaScript method that 
returns a text string containing the time using 
ocal conventions. HTML 682 


top CSS property that defines the top coordi- 
nates of an element placed using relative, abso- 
ute, or fixed positioning. HTML 238 


tr HTML element that encloses a table row. 
HTML 452 


track HTML element that attaches a text track to 
a media clip. HTML 618 


tracking A measure of the amount of space 
between words, set using the word-spacing 
property. HTML 127 


tracks Rows or columns within a grid layout. 


transform CSS property used to rotate, rescale, 
skew, or shift a page object. HTML 326 


transition A change in an object's style from an 
initial state to an ending state. HTML 640 


transition CSS property that defines a transi- 
tion between an initial state and an end state. 
HTML 642 


transitional DTD The DTD used by XHTML that 
supports those HTML features that were 
deprecated in HTML 5. HTML F5 


typography The art of designing the 
appearance of characters and letters on a page. 
HTML 117 


U 


unary operator An operator that works with only 
one operand. HTML 720 


Unicode The largest character set supporting up 
to 65,536 symbols that can be used with any of 
the world’s languages. HTML 33 


Uniform Resource Locator (URL) A standard 
address format used to link to a variety of 
resource documents. HTML 57 


unordered list A list that is used for items that 
do not follow a defined sequential order. 
HTML 49 


unstack The process of removing the last item 
from an array. HTML 766 


update expression The expression in a for loop 
that updates the value of the counter variable 
each time through the loop. HTML 770 


URL. See Uniform Resource Locator (URL) 


use strict JavaScript statement that specifies 
syntax rules should be strictly applied. 
HTML 683 


user agent style A style built into the web 
browser itself. HTML 89 


user-defined style A style defined by the user 
based on settings made in configuring the 
browser. HTML 87 


UTF-8 The most common character encoding in 
present use. HTML 17 


V 


valid document A well-formed XML document 
that contains only those elements, attributes, and 
other features that have been defined for its XML 
vocabulary. HTML F4 


validation The process of ensuring the user has 
supplied valid data. HTML 575 
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validator A program that tests code to ensure 
that it contains no syntax errors. HTML 7 


value HTML attribute that provides the default 
value for a data field. HTML 518 


vanishing point An effect of perspective in 
which parallel lines appear to converge to a 
point. HTML 333 


var JavaScript keyword used to declare a 
variable. HTML 698 


variable A named item in a program that stores a 
data value or an object. HTML 709 


vector image An image format in which the lines 
and curves that comprise the image are based on 
mathematical functions. HTML 280 


vendor prefix The prefix added to a browser 
extension. HTML 92 


video HTML element that embeds a video file in 
a web page. HTML 618 


viewport meta A meta tag used to set the 
properties of the layout viewport. HTML 362 


viewport unit A relative unit of length that 
expresses a size relative to the width or height of 
the browser window. HTML 125 


virtual keyboard A keyboard that exists as a 
software representation of a physical keyboard. 
HTML 531 


visited CSS pseudo-class that selects previ- 
ously-visited links. HTML 136 


visual viewport The part of the mobile layout 
that displays the web page content that fits within 
a mobile screen. HTML 372 


vps An open source video codec used in 
Google's WebM video format. HTML 620 


vp9 A video codec developed by Google as a 
successor to VP8, offering the same video quality 
at half the download size. HTML 620 


W 
W3C. See World Wide Web Consortium (W3C) 
WAN. See wide area network (WAN) 


watermark A translucent graphic that is part of 
the page content and that displays a message 
that the content is copyrighted or in draft form 


or some other message directed toward the 
reader. HTML 283 


WAV The original audio format for Windows PCs, 
commonly used for storing uncompressed audio, 

making it impractical for all but the shortest audio 
clips. HTML 608 


weakly typed language A programming 
language in which variables are not strictly tied to 
specific data types. HTML 711 


web browser A software program that retrieves 
and displays web pages. HTML 4 


web content management system (wcms) 
Provides authoring tools for website content and 
administration. HTML 7 


web font A font in which the font definition is 
supplied to the browser in an external file. 
HTML 119 


web form A web page design element in which 
users can enter data that can be saved and 
processed. HTML 520 


web framework Software that provides the foun- 
dation for the design and deployment of web 
technologies including HTML, databases, and 
web server programs for managing electronic 
commerce and communication. HTML 7 


Web Hypertext Application Technology 
Working Group (WHATWG) A group formed in 
2004 to develop HTML 5 as a rival version to 
XHTML 2.0. HTML 5 


web page A document stored by a web server 
and accessed by a web browser. HTML 4 


web safe font A font that is displayed mostly the 
same way in all operating systems and on all 
devices. HTML 118 


web server A server that makes web pages 
accessible to the network. HTML 4 


web table An HTML structure consisting of 
multiple rows with each row containing one or 
more table cells. HTML 454 


Web Video Text Tracks (WebVTT) A text file for- 
mat used for storing video text tracks. HTML 625 


WebM An open source format introduced by 
Google to provide royalty-free video and audio to 
be used with the HTML audio and video 
elements HTML 608 


well-formed document An XML document that 
employs the correct syntax. HTML F2 


WHATWG. See Web Hypertext Application 
Technology Working Group (WHATWG) 


while loop A program loop in which the 
command block is run as long as a specified 
condition is met. HTML 774 


white-space character An empty or blank 
character such as a space, tab, or line break. 
HTML 12 


wide area network (WAN) A network that 
covers a wide area, such as several buildings or 
cities. HTML 4 


widget An object within a web form that 
allows users to interact with the form. HTML 520 


widows CSS property that limits the number 
of lines stranded at the top of a page. 
HTML 418 


width CSS property that defines the width of an 
element. HTML 176 


wildcard selector A selector that matches all 
elements. HTML 111 


window. alert JavaScript command to display an 
alert dialog box in the browser window. 
HTML 683 


World Wide Web Consortium (W3C) A group 
of web designers and programmers that set the 
standards or specifications for browser 
manufacturers to follow. HTML 5 


World Wide Web (WWW) The totality of 
interconnected hypertext documents on the 
Internet. HTML 4 


WWW. See World Wide Web (WWW) 


Xx 


XHTML (Extensible Hypertext Markup 
Language) A version of HTML in which syntax 
standards are strictly enforced. HTML 5 


XML. See Extensible Markup Language 


XML parser A software program that checks 
an XML file for errors in syntax and content. 
HTML F2 


XML vocabularies Markup languages developed 
using XML. HTML F1 


Note: Boldface indicates key terms. 
Special Characters 
- (minus sign), HTML 720 
/ (forward slash), HTML 720 
ampersand), HTML 35, HTML 777 
(pound symbol), HTML 35 
(asterisk), HTML 111, HTML 720 
plus sign), HTML 720 
(percent sign), HTML 720 
equal sign), HTML 721, HTML 776, HTML 786 
(square brackets), HTML 758 
left angle bracket), HTML 776 
{}(curly braces), HTML 773 
! (exclamation point), HTML 776, HTML 777 
| (pipe), HTML 777, HTML 787 
> (right angle bracket), HTML 776 
&#8226; (numeric entity reference), HTML 23, 
HTML 34 


A 


<a> tag, HTML 29, HTML 46, HTML B5 

attributes, HTML 68-69 
AAC format. See Advanced Audio Coding (AAC) format 
<abbr> tag, HTML 29, HTML B5 
absolute paths, HTML 61 
absolute positioning, HTML 238, HTML 241-244 
absolute units, font size, HTML 123, HTML 133 
access keys, HTML 531 
accessibility, HTML D1-D17 

animation and motion sensitivity, HTML 666 

ARIA, HTML 44 

checking for, HTML D17 

Section 508 guidelines. See Section 508 

tables, HTML 474 

WAI, HTML D13-D16 
Accessible Rich Internet Applications (ARIA), HTML 44 
achromatopsia, HTML D4, HTML D5 
<acronym> tag, HTML B6 
action attribute, HTML 518, HTML 523 
active pseudo-class, HTML 136, HTML 152, HTML C3 
adaptive technology, HTML D2 
<address> tag, HTML 24, HTML Bé 
Advanced Audio Coding (AAC) format, HTML 608 
after pseudo-class, HTML 136 
after pseudo-element, HTML 154, HTML 418, HTML C2 
align attribute, HTML 618 
align-content property, HTML 410, HTML 411 
aligning 

along flexbox main axis, HTML 409 

flex lines, HTML 410 

items along flexbox cross axis, HTML 410-411 

text, horizontally and vertically, HTML 130-131 
align-items property, HTML 411 
alt attribute, HTML 36, HTML D2, HTML D3 
American Standard Code for Information Interchange 
(ASCII), HTML 33 
ampersand (&) 

character encoding references, HTML 35 

logical operators, HTML 777 
analogic color scheme, HTML 106 
animation(s), HTML 652-666 

applying, HTML 655-657 
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controlling, HTML 658-666 
key frames, HTML 652 
properties, HTML 655 
safe, HTML 666 
Section 508 guidelines, HTML D10 
animation style, HTML 641 
animation-play-state style, HTML 641 
applet(s), Section 508 guidelines, HTML D10-D11 
<applet> tag, HTML Bé 
<area> tag, HTML Bo 
ARIA. See Accessible Rich Internet Applications (ARIA) 
array(s), HTML 752-769 
creating and populating, HTML 758-761 
as data stacks, HTML 766-768 
extracting and inserting items, HTML 765-766 
filtering, HTML 782-783 
indexes, HTML 757 
length, HTML 761-763 
mapping, HTML 781-782 
methods, HTML 767-768 
methods to loop through arrays, HTML 780-781 
multidimensional, HTML 763 
parallel, HTML 788 
passing a value to a callback function, HTML 782 
program loops, HTML 777-784 
random shuffle, HTML 765 
returning random values, HTML 780 
reversing, HTML 763-764 
running a function for each array item, HTML 781 
sorting, HTML 764-765 
sparse, HTML 761 
array literals, HTML 758-759 
<article> tag, HTML 24, HTML B6 
ASCII. See American Standard Code for Information 
Interchange (ASCII) 
aside blockquote selector, HTML 108 
<aside> tag, HTML 24, HTML Bé 
assignment operators, HTML 720-721 
assistive technology, HTML D2 
asterisk (*) 
JavaScript operators, HTML 720 
wildcard selector, HTML 111 
asymmetric transitions, HTML 652 
at-rules, CSS, HTML 98, HTML C4 
attribute(s), HTML B2-B5. See also specific attribute 
names 
adding to elements, HTML 12 
aural browsers, HTML C6-C7 
autocomplete, HTML 539 
backgrounds, HTML C7-C8 
block-level styles, HTML C8-C9 
browsers, HTML C9-C10 
column, HTML C10 
content, HTML C10-C11 
core, HTML B2 
core events, HTML B3 
display styles, HTML C11-C12 
document events, HTML B3 
drag and drop event, HTML B4 
elements, HTML 11-12 
event, HTML B3 
fonts and text, HTML C12-C14 


INDEX 


form, HTML B2 
form events, HTML B4 
formatting tables using, HTML 492 
grids, HTML C14-C15 
hypertext, HTML 68-69 
language, HTML B2 
layout, HTML C14 
lists, HTML C16 
meta element, HTML 17 
multimedia event, HTML B4-B5 
outlines, HTML C16 
presentational, HTML 36 
printing, HTML C16-C17 
required for XHTML elements, HTML F8 
special effects, HTML C17-C18 
tables, HTML C18 
valid use of, HTML F7-F8 
attribute minimization, HTML 11 
attribute selectors, HTML 113-116 
audio element, HTML 602, HTML 607 
audio formats, browser support, HTML 607-610 
<audio> tag, HTML 36, HTML B6-B7 
augmented linear structures, HTML E2 
aural browsers, attributes, HTML C6-C7 
autocomplete attribute, HTML 539 
autofocus, HTML 557 


B 

<b> tag, HTML 29, HTML B7 

background 
attributes, HTML C7-C8 
setting color, HTML 102-105 

background images, HTML 280-290 
attaching, HTML 282-283 
background property, HTML 286-287 
defining extent, HTML 284 
multiple backgrounds, HTML 288-290 
setting image options, HTML 286 
setting image position, HTML 283-284 
sizing and clipping, HTML 285 
tiling, HTML 281-283 

background property, HTML 274, HTML 286-287 

background styles, HTML 280-290 

background-color property, HTML 86 

background- image property, HTML 274 

balance, HTML 259 

<base> tag, HTML 15, HTML 62, HTML B7 

<basefont> tag, HTML B7 

<bdi> tag, HTML B7 

<bdo> tag, HTML B7 

before pseudo-class, HTML 136 

before pseudo-element, HTML 154, HTML C2 

Berners-Lee, Timothy, HTML 4, HTML D1 

<big> tag, HTML B7 

binary operators, HTML 720 

bitmap images, HTML 280 

block elements, centering, HTML 187 

block quotes, HTML 39-41, HTML 157 

block-level styles, attributes, HTML C8-C9 

<blockquote> tag, HTML 27, HTML B7 

blur function, HTML 338 

body, HTML 24-31 
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grouping elements, HTML 26-28 
sectioning elements, HTML 24-26 
text-level elements, HTML 29-31 
<body> tag, HTML 2, HTML 10, HTML 24, HTML B7 
BOM. See browser object model (BOM) 
Boolean values, HTML 710 
border(s), HTML 143, HTML 290-300 
adding to tables using CSS, HTML 459-464 
applying border images, HTML 297-300 
collapse style, HTML 464 
collapsing, HTML 463-464 
color, HTML 290-291 
design, HTML 291-293 
hidden, reconciling, HTML 462 
reconciling different styles, HTML 463 
rounded corners, HTML 293-296 
style, HTML 463 
width, HTML 290-291 
border box model, HTML 197 
border property, HTML 274 
border-collapse property, HTML 453, HTML 461 
border-color property, HTML 290-291 
border-image property, HTML 274, HTML 297-300 
border-left property, HTML 274 
border-radius property, HTML 274, HTML 293-296 
border-right property, HTML 274 
border-side property, HTML 292 
border-style property, HTML 291-293 
border-width property, HTML 290-291, HTML 292 
box model, HTML 143-144 
box shadow(s), HTML 306-311, HTML 341 
box-shadow property, HTML 302, HTML 306-311, 
HTML 341 
<br> tag, HTML 29, HTML B7 
break statement, HTML 806 
break-after property, HTML 502 
break-before property, HTML 502 
breakpoints, HTML 694 
inserting, HTML 694-695 
brightness function, HTML 338 
browser developer tools, HTML 95-96 
browser extensions 
gradients, HTML 320 
style rules, HTML 92-93 
browser object(s), HTML 700 
browser object model (BOM), HTML 700 
browser styles, HTML 89 
browser(s). See web browsers 
built-in objects, HTML 700 
<button> tag, HTML B7 
buttons. See also specific buttons 
command, HTML 572 
form. See form buttons 
image, HTML D11 
option (radio), HTML 520, HTML 553-555 
push, HTML D11 


Cc 

calCaption() function, HTML 752, HTML 759-760 

calendar app, HTML 754-757, HTML 796-805 
createCalendar() function, HTML 756-757 
highlighting the current date, HTML 801-803 
placing first day of the month, HTML 798-799 
setting first day of the month, HTML 797-798 
structure, HTML 755-756 
writing calendar days, HTML 799-801 

calendar controls, HTML 520 


callback functions, passing values to, HTML 782 
callto: scheme, HTML 67 
canvas pseudo-class, HTML C3 
<canvas> tag, HTML 36, HTML B8 
caption(s) 
adding to tables, HTML 471-473 
formatting, HTML 473 
caption attribute, HTML D9 
caption element, HTML 452, HTML 471-473 
<caption> tag, HTML B8 
caption-side property, HTML 453, HTML 472 
Cascading Style Sheets (CSSs), HTML 32, HTML 85-174. 
See also entries beginning with CSS 
@ rules, HTML 98, HTML C4 
adding table borders, HTML 459-464 
attributes and values, HTML C6-C17 
color. See color in CSS 
creating pulldown menus, HTML 376-379 
drop caps, HTML 193 
filters, HTML 337-341 
frameworks, HTML 210 
generating content, HTML 155-156 
grids. See CSS grids 
introducing grids, HTML 210-213 
lists. See formatting lists 
modules, HTML 88 
positioning objects, HTML 244 
pseudo-classes, HTML C3 
pseudo-elements, HTML C2 
quotation marks, HTML 157-158 
selectors, HTML C2-C17 
style rules. See style rules 
style sheets. See style sheets 
styles. See style(s); table styles 
syntax, HTML C4 
transformations. See transformations 
typography. See CSS typography; font(s); selector 
patterns 
units, HTML C5-Cé 
white space, HTML 257 
case statement, HTML 796 
cells 
spanning rows and columns, HTML 464-471 
types, HTML 456 
<center> tag, HTML B8 
centering block elements, HTML 187 
centering vertically, HTML 188-189 
using flexboxes, HTML 412 
CGI. See Common Gateway Interface (CGI) 
&char; character encoding reference, HTML 33, HTML 34 
character encoding, HTML 17, HTML 33-34 
defining, HTML 97-98 
character entity references, HTML 22, HTML 34-35 
character sets, HTML 33 
charset meta element, HTML 17 
@charset rule, HTML 86, HTML 97, HTML C4 
check boxes, HTML 520 
checkbox data type, HTML 544 
checked pseudo-class, HTML 582, HTML C3 
child elements, HTML 110 
<cite> tag, HTML 22, HTML 23, HTML 29, HTML 30, 
HTML B8 
class attribute, HTML 11 
attribute selectors, HTML 115-117 
clear property, HTML 176 
clearing floats, HTML 193-197 
client(s), HTML 4 
client-server networks, HTML 4 


client-side image maps, HTML 341 
client-side programming, HTML 684-685 
client-side validation, HTML 575 

clip property, HTML 257-258 


clipping 


background images, HTML 285 
elements, HTML 257-258 


closing tags, HTML 2 

&#code; character encoding reference, HTML 33, HTML 34 
<code> tag, HTML 29, HTML B8 

codecs 


audio, HTML 604 
video, HTML 620-621 


cognitive disability, HTML D1 

col element, HTML 476 

<col> tag, HTML B8 

colgroup element, HTML 476, HTML 482 
<colgroup> tag, HTML B8 

collapsing table borders, HTML 463-464 
color 


borders, HTML 290-291 

CSS. See color in CSS 

gradients. See color gradients 
Section 508 guidelines, HTML D4-Dé 


color blindness, HTML D4-D6 
color gradients, HTML 312-322 


browser extensions, HTML 320 
color stops, HTML 315-316 
creating, HTML 321 

linear, HTML 312-315 

radial, HTML 316-319 
repeating, HTML 320-321 
transparency, HTML 314 


color in CSS, HTML 98-106 


choosing color schemes, HTML 99 

color names, HTML 98 

defining semi-opaque colors, HTML 102 

HSL color values, HTML 101-102 

progressive enhancement, HTML 106 

RGB color values, HTML 99-101 

setting text and background colors, HTML 102-105 


color names with color values and HTML character entities, 
HTML A1-A8 

color pickers, HTML 520 

color property, HTML 86 

color stops, gradients, HTML 315-316 

color values 


HSL, HTML 101-102 
RGB, HTML 99-101 


color-stop, HTML 302 
colspan attribute, HTML 452, HTML 464-466 


column(s) 


applying layout, HTML 497-498 
attributes, HTML C10 
banded, creating, HTML 485 

creating layout, HTML 504 

gap between, HTML 498-501 

setting number, HTML 496-498 

spanning, HTML 464-466, HTML 503-504 


umn breaks, HTML 501-503 
umn groups, HTML 482-484 


defining, HTML 483 
formatting, HTML 483-484 
identifying, HTML 482 


umn width 


defining, HTML 498-501 
setting, HTML 486, HTML 489 


umn-count property, HTML 496, HTML 498-501 


column-gap property, HTML 499 
column-rule property, HTML 500 
columns property, HTML 498-501 
command(s). See also specific commands 
JavaScript, writing, HTML 690-691 
running at specified intervals, HTML 734-736 
time-delayed, HTML 734 
command blocks, HTML 773 
command buttons, HTML 572 
<command> element, HTML B8 
comments, HTML 18-20 
adding to JavaScript code, HTML 689-690 
conditional, HTML 20 
style sheets, HTML 96-97 
Common Gateway Interface (CGI), HTML 522 
compare functions, HTML 764-765 
comparison operators, HTML 776 
compilers, HTML 685 
complementary color scheme, HTML 106 
compressing, speeding up websites, HTML 416 
concat () method, HTML 768 
conditional comments, HTML 20 
conditional expressions, HTML 786 
conditional operators, HTML 791 
conditional statements, HTML 786-809 
constants, Math object, HTML 728-730 
container(s), HTML 604 
container collapse, HTML 201-203 
content 
assigning to grid cells, HTML 234 
attributes, HTML C10-C11 
clipping, HTML 258 
CSS, generating, HTML 155-156 
CSS, inserting, HTML 156 
floating, HTML 189-204 
generating with lorem ipsum, HTML 232 
reordering using flexboxes, HTML 407-408 
content box model, HTML 197 
content property, HTML 136, HTML 155-156 
attribute values, HTML 156 
content-box keyword, HTML 274 
contextual selectors, HTML 110-112 
continue expression, HTML 770 
continue statement, HTML 806-807 
contrast, HTML 259 
contrast function, HTML 326, HTML 338 
controls, HTML 520. See also widgets 
controls attribute, HTML 602 
copyWithin () method, HTML 768 
core attributes, HTML B2 
core event attributes, HTML B3 
counter variables, HTML 772, HTML 773, HTML 774 
cover keyword, HTML 274 
createCalendar() function, HTML 752 
creating using dynamic pseudo-classes, HTML 152 
cross axis, flexboxes, HTML 394 
aligning items along, HTML 410-411 
cross-browser flexboxes, HTML 395 
CSS\s). See Cascading Style Sheets (CSSs) 
CSS at-rules, HTML 98, HTML C4 
CSS display property, HTML 490 
CSS grid model, HTML 210 
CSS grids, HTML 210-213 
creating, HTML 213-215 
defining, HTML 224 
CSS pixels, HTML 375 
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CSS typography, HTML 109-135 
fonts. See font(s); font size; font styles 
selector patterns. See selector patterns 
spacing and indentation, HTML 127-129 
CSS, HTML 88 
cubic-bezier function, HTML 646 
cue label, HTML 618 
cue pseudo-element, HTML 619, HTML 630-632 
cue text, HTML 618, HTML 619 
curly braces (), command blocks, HTML 773 
cursive fonts, HTML 118 
custom form buttons, designing, HTML 575 
customized objects, HTML 700 


D 
data attributes, HTML 494 
data cells, tables, marking, HTML 458 
data fields, HTML 521 
<data> tag, HTML 29 
data types, HTML B1 
validating based on, HTML 577-578 
variables, HTML 710 
data validation, HTML 563-585 
data lists, HTML 569-571 
form buttons. See form buttons 
numeric data. See numeric data validation 
datalist, HTML 569 
datalist element, HTML 562 
<datalist> tag, HTML B8 
date(s), writing for global marketplace, HTML 715 
Date objects, HTML 698, HTML 711-716 
applying Date methods, HTML 713-715 
creating, HTML 712 
setting date and time values, HTML 716 
storing dates, HTML 712 
days left in year, calculating, HTML 721-723 
<dd> tag, HTML 27, HTML B8 
debugging, HTML 692-696 
applying strict usage of JavaScript, 
HTML 695-696 
error types, HTML 692 
inserting breakpoints, HTML 694-695 
opening debugging tool, HTML 692-693 
declaring variables, HTML 709 
decrement operator (- -), HTML 720 
default field values, HTML 539-542 
default namespace, HTML F9 
default pseudo-class, HTML 582 
<del> tag, HTML B9 
delaying transitions, HTML 647 
deprecated, HTML 6, HTML B1 
descendant elements, HTML 110 
description lists, HTML 51-54 
design principles, HTML 259 
desktop designs, HTML 387-389 
<details> tag, HTML B9 
deuteranopia, HTML D4, HTML D5 
device pixels, HTML 375 
device-pixel ratio, HTML 375 
<dfn> tag, HTML 29, HTML B9 
dir attribute, HTML 11 
<dir> tag, HTML B9 
disabled pseudo-class, HTML 582, HTML C3 
display property, HTML 176, HTML 178, HTML 392, 
HTML 418 
display styles, attributes, HTML C11-C12 
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displaying. See also viewing 
attribute values, HTML 156 
values, HTML 156 
<div> tag, HTML 26, HTML 27, HTML B9 
<dl> tag, HTML 27, HTML 51-54, HTML B9 
D-links, HTML D3 
DOCTYPE declaration, HTML F8-F9 
Idoctype tag, HTML B5 
document body, HTML 2 
document event attributes, HTML B3 
document head, HTML 2, HTML 15-18 
adding metadata, HTML 16-18 
setting page title, HTML 16 
document object(s), HTML 700 
document object model (DOM), HTML 700 
document type declaration, HTML 2, HTML 8-9 
document type definitions (DTDs), HTML F4-F7 
HTML and XHTML versions, HTML F9 
document .write () method, HTML 708 
DOM. See document object model (DOM) 
domain names, HTML 65 
do/while loop, HTML 775-776 
drag and drop event attributes, HTML B4 
drop caps, HTML 193 
drop shadows, HTML 304-311, HTML 341 
box, HTML 306-311 
text, HTML 304-306 
drop-shadow function, HTML 338, HTML 341 
<dt> tag, HTML 27, HTML B9 
DTD files, HTML F4 
DTDs. See document type definitions 
dynamic content, HTML D11 
dynamic pseudo-classes, HTML 152-154 


E 
elastic layout, HTML 183 
elements), HTML B5-B21. See also specific element names 
attributes. See element attributes 
clipping, HTML 257-258 
embedded, HTML 36 
empty, HTML9 
floating, HTML 190-193 
grouping, HTML 26-28 
hierarchy, HTML 10 
inline, HTML 29 
interactive, HTML 36 
list, HTML B5-B21 
metadata, HTML 16 
nested, HTML 9 
presentational, HTML 36 
rounded corners, HTML 293-296 
sectioning, HTML 24-26 
semantic, HTML 24 
stacking, HTML 258-260 
text-level, HTML 29-31 
width and height, HTML 184-189 
element attributes, HTML 11-12 
adding, HTML 12 
list, HTML B5-B21 
element tags, HTML 9-10 
one-sided, HTML 9 
else if statements, multiple, HTML 794 
<em> tag, HTML 22, HTML 23, HTML 29, HTML 30, 
HTML B9 
em unit, HTML 108 
email addresses, linking to, HTML 65-67 
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email harvesters, HTML 67 
embed element, HTML 615 
<embed> tag, HTML 36, HTML B9 
embedded content, HTML 36 
embedded elements, HTML 36 
embedded objects, HTML 605, HTML 615-616 
embedded script, HTML 686 
embedded style(s), HTML 89 
embedded style sheets, style rules, HTML 93 
emphasis, HTML 259 
empty elements, HTML 9 
empty pseudo-class, HTML 149, HTML C3 
enabled pseudo-class, HTML 582, HTML C3 
enctype attribute, HTML 523-524 
ending tags, HTML9 
equal sign (=) 
assignment operators, HTML 721 
comparison operators, HTML 776, HTML 786 
equals operator (= = =), HTML 786 
errors, types, HTML 692 
event attributes, HTML B3 
every () method, HTML 783 
exclamation point (!) 
comparison operators, HTML 776 
logical operators, HTML 777 
explicit grid, HTML 216 
Extensible Hypertext Markup Language. See XHTML 
(Extensible HyperText Markup Language) 
Extensible Markup Language (XML), HTML F1 
extensions, HTML 65 
external styles, HTML 89 


F 
fallback, audio clips, HTML 613-614 
fantasy fonts, HTML 118 
fax scheme, HTML 64 
field(s), HTML 521 
hidden, HTML 552 
field labels, HTML 532-533 
field sets, HTML 525 
legends, HTML 526-527 
marking, HTML 525-526 
field values 
default, HTML 539-542 
defining length, HTML 580 
validating, HTML 579 
fieldset element, HTML 518, HTML 525, HTML 553 
<fieldset> tag, HTML B9 
FIFI. See first-in first-out (FIFO) principle 
<figcaption> tag, HTML 27, HTML B9 
figure boxes, HTML 276-279 
<figure> tag, HTML 27, HTML B9 
file scheme, HTML 64 
£il1() method, HTML 768 
filter () method, HTML 783 
filter property, HTML 326, HTML 337-341 
filtering arrays, HTML 782-783 
filters, HTML 337-341 
ind() method, HTML 783 
indIndex () method, HTML 783 
finding information on networks, HTML 4 
irst pseudo-class, HTML C3 
irst-child pseudo-class, HTML 149, HTML C3 
first-in first-out (FIFO) principle, HTML 766 
irst-letter pseudo-element, HTML 154, HTML C2 
irst-line pseudo-element, HTML 154, HTML C2 
irst-node pseudo-class, HTML C3 


first-of-type pseudo-class, HTML 136, HTML 149, 
HTML C3 
fixed grids, HTML 209 
fixed layouts, HTML 182-183 
fixed positioning, HTML 244 
FLAC format. See Free Lossless Audio Codec (FLAC) 
format 
Flash player, HTML 635-636 
flex basis, setting, HTML 397-398 
flex growth, defining, HTML 398-399 
flex items, sizing, HTML 401 
flex lines, aligning, HTML 410 
flex property, HTML 392, HTML 401 
flex-basis property, HTML 397-398 
flex-basis value, HTML 392 
flexbox(es), HTML 392, HTML 534-535 
aligning flex lines, HTML 410 
aligning items along cross axis, HTML 410-411 
aligning items along main axis, HTML 409 
applying flexbox layouts, HTML 402-407 
centering elements vertically, HTML 412 
cross-browser, HTML 395 
defining, HTML 394, HTML 396 
defining flex growth, HTML 398-399 
defining shrink rate, HTML 399-401 
flex property, HTML 401 
reordering page content, HTML 407-408 
setting flex basis, HTML 397-398 
setting flexbox flow, HTML 395-396 
sizing flex items, HTML 402 
flexbox flow, setting, HTML 395-396 
flexbox layouts, applying, HTML 402-407 
flex-direction property, HTML 395, HTML 396 
flex- flow property, HTML 392, HTML 395 
£lex-grow property, HTML 398-399, HTML 401 
flex-grow value, HTML 392 
flexible layouts, image maps, HTML 346 
flex-shrink property, HTML 401 
flex-shrink value, HTML 392 
flex-wrap property, HTML 395, HTML 396, HTML 399 
float property, HTML 176 
floating, HTML 189-193 
clearing a float, HTML 193-197 
floating elements, HTML 176-205 
container collapse, HTML 201-203 
content, HTML 189-204 
display style, HTML 178 
negative space, HTML 204 
page layout designs, HTML 182-183 
refining layouts, HTML 197-201 
reset style sheets, HTML 178-182 
width and height, HTML 184-189 
Flowplayer, HTML 637 
fluid grids, HTML 209 
fluid layout, HTML 183 
focus, HTML 582 


focus pseudo-class, HTML 152, HTML 581-583, HTML C3 


folder path, specifying with links, HTML 60-62 
font(s), HTML 117-127 

attributes, HTML C12-C14 

choosing, HTML 117-119 

cursive, HTML 118 

fantasy, HTML 118 

@font-face rule, HTML 120-122 

generic, HTML 117-118 

Google, HTML 123 

monospace, HTML 117 


sans-serif, HTML 117, HTML 133 
selecting, HTML 133 
serif, HTML 117, HTML 133 
size. See font size 
specific, HTML 117 
styles. See font styles 
web, HTML 120-122 

font families, specifying, HTML 119 

font size, HTML 123-127 
absolute units, HTML 123, HTML 133 
page elements, setting, HTML 128-129 
readability, HTML 133 
relative units, HTML 123-124, HTML 133 
scaling with ems and rems, HTML 124-125 
sizing keywords, HTML 125-127 
viewport units, HTML 125 

font stacks, HTML 117 

font styles, HTML 129-133 


aligning text horizontally and vertically, HTML 130-131 


combining all text formatting in single style, HTML 
131-133 
<font> tag, HTML B9 
@font-face rule, HTML 108, HTML 120-122, HTML C4 
font-family property, HTML 108 
font-size property, HTML 108 
<footer> tag, HTML 24, HTML B10 
for attribute, HTML 518, HTML 532 
for loop, HTML 770, HTML 772-773 
forEach () method, HTML 783 
form attributes, HTML B2 
form buttons, HTML 572-575 
command, HTML 572 
custom, designing, HTML 575 
submit and reset, HTML 563, HTML 572-575 
form controls, tools, HTML 585 
form element, HTML 518, HTML 522 
form event attributes, HTML B4 
Form Stack, HTML 585 
<form> tag, HTML B10 
formatting 
captions, HTML 473 
hyperlinks for printing, HTML 428-430 
lists. See formatting lists 
row groups, HTML 480-481 
style, HTML 131-133 
tables, using HTML attributes, HTML 492 
formatting lists, HTML 138-143 
images as list markers, HTML 141-142 
list marker position, HTML 141, HTML 142-143 
list style type, HTML 138 
outline style, HTML 138-141 
forward slash (/), JavaScript operators, HTML 720 
fr (fractional) unit, HTML 217 
track sizes with, HTML 217-218 
frame sites, Section 508 guidelines, HTML D10 
<frame> tag, HTML B10, HTML B11-B12 
frameset DTDs, HTML F5-F6 
<frameset> tag, HTML B10 
frameworks, HTML 210 
Free Lossless Audio Codec (FLAC) format, HTML 608 
ftp scheme, HTML 64 
function(s), HTML 730 
JavaScript. See JavaScript functions 
running for each array item, HTML 781 
function keyword, HTML 718 


G 

generic fonts, HTML 117 

geo scheme, HTML 64 

get method, HTML 523 

getElementById() method, HTML 698 

getFullYear() method, HTML 718 

GIF (Graphics Interchange Format), HTML 280 

global scope, HTML 733 

global variables, HTML 733 

Google Chrome device emulator, HTML 380-381 

Google Fonts, HTML 123 

Google Forms, HTML 585 

gradients. See color gradients 

graphic design, legacy browsers, HTML 300 

graphic design with CSS, HTML 273-360 
backgrounds. See background 

borders. See border(s) 

drop shadows, HTML 304-311 

file formats, HTML 280 

filters, HTML 337-341 

gradients. See color gradients 

image maps, HTML 341-347 

transformations. See transformations 
graphics. See also image(s) 

Section 508 guidelines, HTML D2-D4 
Graphics Interchange Format. See GIF (Graphics 
Interchange Format) 
grayscale function, HTML 326, HTML 338 
grid(s) 

attributes, HTML C14-C15 

gap, HTML 232-234 
grid area, HTML 211 
grid cell, HTML 224 
alignment for single, HTML 235 
grid columns, HTML 207 
placing items by, HTML 224-226 
repeating, HTML 218-219 
working with, HTML 215-221 
grid layouts, HTML 206-237 
aligning grid, HTML 235-236 
alignment for single grid cell, HTML 235 

applying, HTML 219-221 

creating CSS, HTML 213-215 

CSS frameworks, HTML 210 

CSS grids. See CSS grids 

defining grid gap, HTML 232-234 

fixed, HTML 209 

fluid, HTML 209 

introducing CSS, HTML 210-213 

managing space within grid, HTML 234-236 

outlining a grid, HTML 221-223 

overview, HTML 208-209 

placing grid items by area, HTML 228-232 

placing items by row and column, HTML 224-226 

placing items within, HTML 221-232 

repeating columns and rows, HTML 218-219 

track sizes with fractional units, HTML 217-218 

using span keyword, HTML 226-227 

working with grid rows and columns, 

HTML 215-221 
grid rows, HTML 207 

placing items by, HTML 224-226 

repeating, HTML 218-219 

working with, HTML 215-221 
grid tracks, HTML 211 
gridline names, HTML 226 
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grouping, selection options, HTML 551-552 
grouping elements, HTML 26-28 


H 
<h1> tag, HTML 22, HTML 23 
hi-hé elements, HTML 24 
H.264 codec, HTML 620 
hanging indents, HTML 128 
<head> tag, HTML 2, HTML 10, HTML 15, HTML B11 
header cells, tables, marking, HTML 456-459 
<header> tag, HTML 24, HTML B11 
headers attribute, HTML D9 
headings, column-spanning, HTML 503-504 
hearing disability, HTML D1 
height 
elements, HTML 184-186 
table rows, setting, HTML 487-488 
hexadecimal numbers, HTML 100 
<hgroup> tag, HTML B11 
<hi> tag, HTML B11 
hidden attribute, HTML 11 
hidden borders, tables, reconciling, HTML 462 
hidden fields, HTML 552 
hierarchical structures, HTML E2-E3 
hosts, HTML 4 
hotspots, HTML 341 
hover event, touch devices, HTML 152 
hover pseudo-class, HTML 136, HTML 152, HTML 154, 
HTML C3 
hover transitions, HTML 647-652 
<hr> tag, HTML 27, HTML 39, HTML B11 
href attribute, HTML 46 
HSL color value, HTML 86, HTML 101-102 
HTML (Hypertext Markup Language) 
comments, HTML 2 
definition, HTML 5 
documents. See HTML documents 
effective code, HTML 15 
history, HTML 5-6 
supporting with legacy browsers, HTML 39 
testing code, HTML 7 
tools, HTML 6-7 
HTML 4.01, HTML5 
HTML code, writing with JavaScript, HTML 705-708 
HTML comments, HTML 2 
HTML documents, HTML 8-15 
basic structure, creating, HTML 10 
creating, HTML 13-14 
document type declaration, HTML 8-9 
element attributes, HTML 11-12 
element hierarchy, HTML 10 
element tags, HTML 9-10 
linking to style sheets, HTML 32-33 
viewing in browsers, HTML 12-13 
white space, HTML 12 
HTML elements and attributes, HTML B5-B21 
<html> tag, HTML 2, HTML 10, HTML B11 
HTML 5, HTML 5-6 
video element, HTML 621-624 
video players, HTML 637 
HTML 5 Shiv, HTML 39 
HTTP (Hypertext Transfer Protocol), HTML 64 
http scheme, HTML 64 
https scheme, HTML 64 
hue, HTML 101 
hue-rotate function, HTML 338 


hyperlinks, HTML 4, HTML 57-68 
applying pseudo-classes, HTML 153 
creating, HTML 58 
effective, HTML 69 
formatting for printing, HTML 428-430 
Internet and other resources, HTML 64-68 
locations within documents, HTML 63-64 
Section 508 guidelines, HTML D12 
setting base path, HTML 62 
specifying folder path, HTML 60-62 
turning inline images into, HTML 59-60 
URLs, HTML 57-68 
hypertext, HTML 4. See also HTML (Hypertext Markup 
Language) 
creating using dynamic pseudo-classes, HTML 152 
hypertext attributes, HTML 68-69 
Hypertext Markup Language. See HTML (Hypertext 
Markup Language) 
Hypertext Transfer Protocol. See HTTP (Hypertext Transfer 
Protocol) 


I 
<i> tag, HTML 29, HTML B11 
id attribute, HTML 11, HTML 522, HTML 528 
attribute selectors, HTML 115 
IDE (Integrated Development Environment), HTML 6-7 
if else statement, HTML 786, HTML 793-794 
if statement, HTML 786, HTML 789-790 
nesting, HTML 791-793 
iframe element, HTML 36, HTML 637 
<iframe> tag, HTML B11-B12 
image(s) 
background. See background images 
list markers, HTML 141-142 
navicon, HTML 412-415 
Section 508 guidelines, HTML D2-D4 
image buttons, HTML D11 
image maps, HTML 341-347 
applying, HTML 345-346 
creating, HTML 344-345 
flexible layouts, HTML 346 
Section 508 guidelines, HTML D6-D7 
image rollovers, HTML D11 
<img> tag, HTML 22, HTML 36, HTML B12 
implicit grid, HTML 216 
@import rule, HTML C4 
!important keyword, HTML 96, HTML C4 
importing style sheets, HTML 98 
increment operator (++), HTML 720 
indentation, HTML 128 
indeterminate pseudo-class, HTML 582 
indexes, arrays, HTML 757 
index0Of () method, HTML 768 
inheritance, styles, HTML 94 
inherited positioning, HTML 244 
inline elements, HTML 29 
inline frames, HTML 637 
inline images, turning into links, HTML 59-60 
inline styles, HTML 93-94 
inline validation, HTML 563, HTML 581-585 
focus pseudo-class, HTML 581-583 
valid and invalid pseudo-classes, HTML 583-585 
innerHTML property, HTML 698 
input boxes, HTML 520, HTML 528-531, HTML D11 
input types, HTML 528-531 
virtual keyboards, HTML 531-532 
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input element, HTML 518, HTML 532 
<input> tag, HTML B12-B13 

in-range pseudo-class, HTML 582 
<ins> tag, HTML B13 

inset keyword, HTML 302 

installing web fonts, HTML 121 
Integrated Development Environment. See IDE 
(Integrated Development Environment) 
interactive elements, HTML 36 
interactive form elements, HTML D11 
Internet, HTML 4 


Internet Assigned Numbers Authority (IANA), HTML 65 


Internet Explorer, conditional comments, HTML 20 
interpreted languages, HTML 685 

invalid pseudo-class, HTML 583-585 

invert function, HTML 338 

irregular line wraps, HTML 254 

ISO 8859-1, HTML 33 


J 
JavaScript, HTML 681-738 
adding comments, HTML 689-690 
converting between numbers and text, HTML 
737-738 
debugging code. See debugging 
defining number format, HTML 737 
development, HTML 685 
fixing common programming mistakes, HTML 738 
functions. See JavaScript functions 
illegal operations, HTML 736-737 
mathematical calculations, HTML 736-738 
syntax, HTML 691-692 
writing better code, HTML 696 
writing commands, HTML 690-691 
JavaScript functions, HTML 730-733 
calling, HTML 732 
to return a value, creating, HTML 733 
scope, HTML 733 
Joint Photographic Experts Group. See JPEG (Joint 
Photographic Experts Group) 
Jotform, HTML 585 
JPEG (Joint Photographic Experts Group), HTML 280 
justify-content property, HTML 409 
JWPlayer, HTML 637 


K 
Kaltura Player, HTML 637 
<kbd> tag, HTML 29, HTML B13 
kerning, HTML 108 
key frames, HTML 652 
stepping between, HTML 658 
@keyframes rule, HTML 641, HTML 652-654 
<keygen> tag, HTML B13 
keywords. See also specific keyword names 
font sizes, HTML 125-127 
kind attribute, HTML 618, HTML 625 


L 

abel(s), HTML D11 

label element, HTML 518, HTML 532 
<label> tag, HTML B13 

ang attribute, HTML 11 

ang pseudo-class, HTML 149, HTML C3 
language attributes, HTML B2 

LAN(s). See local area networks (LANs) 
ast pseudo-class, HTML C3 


last-child pseudo-class, HTML 149, HTML C3 
last-in first-out (LIFO) principle, HTML 766 
lastindex0Of () method, HTML 768 
last-of-type pseudo-class, HTML 136, HTML 149, 
HTML C3 
Latin-1, HTML 33 
layout 
forms, designing, HTML 534-539 
pages. See page layout 
layout viewports, HTML 372, HTML 373 
leading, HTML 127 
left angle bracket (<), comparison operators, HTML 776 
left property, HTML 238 
left pseudo-class, HTML C3 
legacy browsers 
graphic design, HTML 300 
supporting HTML, HTML 39 
legend(s), field sets, HTML 526-527 
legend element, HTML 518, HTML 526 
<legend> tag, HTML B14 
letter-spacing property, HTML 108 
<li> tag, HTML 27, HTML 46, HTML 48, HTML 49, HTML 
50, HTML B14 
LIFO. See last-in first-out (LIFO) principle 
lightness, HTML 101 
line attribute, HTML 618 
line breaks, HTML 38-39 
line wraps, irregular, HTML 254 
linear gradients, HTML 312-315, HTML 321 
linear structures, HTML E1-E2 
linear-gradient function, HTML 302, HTML 312-313, 
HTML 315-316, HTML 321 
linearizing, HTML D7-D8 
line-height property, HTML 108 
link(s). See hyperlinks 
link pseudo-class, HTML 152, HTML C3 
<link> tag, HTML 15, HTML 32, HTML B14 
list(s), HTML 48-57 
attributes, HTML C16 
description, HTML 51-54 
formatting. See formatting lists 
navigation, HTML 55-57 
nested, HTML 50 
ordered, HTML 48-49 
unordered. See unordered lists 
list markers, HTML 138 
images, HTML 141-142 
position, HTML 141, HTML 142-143 
list-style-image property, HTML 136 
list-style-type property, HTML 136 
load-time errors, HTML 692 
local area networks (LANs), HTML 4 
local scope, HTML 733 
local variables, HTML 733 
logical errors, HTML 692 
logical operators, HTML 776-777 
longdesc attribute, HTML D2, HTML D3 
lorem ipsum, HTML 232 
lossless compression, HTML 604 
lossy compression, HTML 604 


M 

mailto scheme, HTML 46, HTML 64 

main axis, flexboxes, HTML 394 
aligning items along, HTML 409 

main element, HTML 27 


map () method, HTML 783 
<map> tag, HTML B14 
mapping arrays, HTML 781-782 
Marcotte, Ethan, HTML 365 
margin area, HTML 422 
margin space, HTML 143, HTML 146-148 
margin-top property, HTML 136 
<mark> tag, HTML B14 
<marks> tag, HTML 29 
markup languages, HTML 5 
Math methods, HTML 723-727 
Math object, HTML 723-730 
constants, HTML 728-730 
Math methods, HTML 723-727 
Math. floor () method, HTML 718 
matrix, HTML 763 
matrix3d function, HTML 333 
max attribute, HTML 562 
max-width property, HTML 176 
measuring units, CSS, HTML C5-Cé 
media attribute, HTML 365-366 
media players, HTML 605 
applying styles, HTML 610-613 
media queries, HTML 362-391 
applying to style sheets, HTML 369-372 
creating a pulldown menu with CSS, HTML 376-379 
desktop designs, HTML 387-389 
device features, HTML 367-368 
amedia rule, HTML 366-367 
for printed output, applying, HTML 421-422 
tablet designs, HTML 383-386 
testing mobile websites, HTML 379-383 
viewports and device width, HTML 372-375 
amedia rule, HTML 366-367, HTML C4 
<menu> tag, HTML B14 
<meta> tag, HTML 2, HTML 15, HTML 16-18, HTML B14 
metadata, HTML 15 
adding to document, HTML 16-18 
metadata elements, HTML 15 
<meter >tag, HTML B14 
method(s), HTML 700. See also specific methods 
applying, HTML 704 
method attribute, HTML 523 
MIME type. See Multipurpose Internet Mail Extension 
(MIME type) 
min attribute, HTML 562 
minifying, HTML 416 
minmax function in grid, using, HTML 219 
minus sign (—), JavaScript operators, HTML 720 
min-width property, HTML 176 
mixed structures, HTML E3-E5 
mobile device(s), web tables, HTML 492-495 
mobile device emulators, HTML 379-382 
mobile first, HTML 370 
mobile web, HTML 361-450 
creating a pulldown menu with CSS, HTML 376-379 
flexbox layouts. See flexbox layouts 
media queries. See media queries 
optimizing sites for, HTML 390 
print styles. See print style(s) 
support, HTML 7 
testing websites, HTML 379-383 
website design, HTML 375-383 
Modernizr, HTML 39 
modules, HTML 88 
modulus operator, HTML 790 


monochrome color scheme, HTML 106 
monospace fonts, HTML 117 

motion sensitivity, animations, HTML 666 
motor disability, HTML D1 

MP3 format, HTML 608 

MP4 format, HTML 618, HTML 620 

MPEG-1 Audio Layer 3 format, HTML 608 
MPEG-4 format, HTML 620 

multi-column layouts, attributes, HTML C10 
multidimensional arrays, HTML 763 
multimedia, Section 508 guidelines, HTML D4 
multimedia event attributes, HTML B4-B5 
multiple attribute, HTML 544 

multiple backgrounds, HTML 288-290 
Multipurpose Internet Mail Extension (MIME type), 
HTML 609 


N 
name attribute, HTML 518, HTML 528, HTML D10 
namespace 
default, HTML F9 
XHTML, setting, HTML F9-F10 
@namespace rule, HTML C4 
naming gridlines, HTML 226 
nav > ul selector, HTML 108 
<nav> tag, HTML 24, HTML 46, HTML B14 
navicon(s), HTML 412 
navicon menus, HTML 412-415 
navigating forms with access keys, HTML 531 
navigation lists, HTML 55-57 
snbsp; character encoding reference, HTML 23, 
HTML 33, HTML 34 
negative space, HTML 204 
nested elements, HTML 9 
nested lists, HTML 50 
nesting if statements, HTML 791-793 
networks, HTML 4 
locating information, HTML 4 
<nobr> tag, HTML B15 
nodes, HTML 4 
<noembed> tag, HTML B15 
<noframe> tag, HTML B15 
no-repeat keyword, HTML 274 
<noscript> tag, HTML B15 
not pseudo-class, HTML 149, HTML C3 
nth-child pseudo-class, HTML C3 
nth-last-child pseudo-class, HTML C3 
nth-last-of -type pseudo-class, HTML 149, HTML C3 
nth-of-type pseudo-class, HTML 136, HTML 149, 
HTML 151 
number data type, HTML 562 
numeric character references, HTML 22 
numeric data validation, HTML 564-569 
range sliders, HTML 566-569 
spinner controls, HTML 564-566 
numeric value, HTML 710 


O 
object(s), HTML 700-703 
applying methods, HTML 704 
properties, HTML 704 
references, HTML 701, HTML 703 
referencing by ID and name, HTML 703 
referencing collections, HTML 701-703 
object collections, HTML 701 
referencing, HTML 701-703 
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<object> tag, HTML 36, HTML B15 
object-based languages, HTML 700 

OGG format, HTML 608 

Ogg format, HTML 608, HTML 620 

<ol> tag, HTML 27, HTML 48-49, HTML B15 
one-sided element tags, HTML 9 
only-child pseudo-class, HTML 149, HTML C3 
only-of-type pseudo-class, HTML 149, HTML C3 
opacity, HTML 102 

opacity function, HTML 338 

opacity property, HTML 302, HTML 322 
opening tags, HTML 2 

operands, HTML 720-723 

operators, HTML 720-723 

<optgroup> tag, HTML B15 

option buttons, HTML 520, HTML 553-555 
option element, HTML 544 

<option> tag, HTML B15 

optional pseudo-class, HTML 582 

or operator (||), HTML 787 

order property, HTML 407 

ordered lists, HTML 48-49 

orphans, HTML 434-435 


orphans property, HTML 418, HTML 434-435, HTML 501, 


HTML 503 
outline(s) 
attributes, HTML C16 
grids, HTML 221-223 
outline property, HTML 206 
outline style, lists, HTML 138-141 
out -of-range pseudo-class, HTML 582 
<output> tag, HTML B16 
overflow, HTML 254-256 
overflow property, HTML 238 


P 
<p> tag, HTML 22, HTML 23, HTML 27, HTML B16 
padding space, HTML 143, HTML 144-146 
padding-box keyword, HTML 274 
page area, HTML 422 
page boxes, HTML 422 
page break(s), HTML 431-435 
adding, HTML 431 
automatic, set by browsers, HTML 432 
preventing, HTML 432-434 
widows and orphans, HTML 434-435 
page groups, HTML 27 
page layout, HTML 175-272 
attributes, HTML C14 
effective, HTML 236 
elastic, HTML 183 
fixed, HTML 182-183 
flexbox. See flexbox(es) 
flexible, image maps, HTML 346 
floating elements. See floating elements 
fluid, HTML 183 
grid layouts. See grid layouts 
positioning styles. See positioning styles 
responsive design, HTML 183 
page names, HTML 423-424 
page property, HTML 423-427 
@page rule, HTML 418, HTML 422-430, HTML C4 
formatting hypertext links for printing, HTML 
428-430 
page names and page property, HTML 423-427 
page pseudo-classes, HTML 423 


setting page size, HTML 423 
page size, setting, HTML 423 
page styles, creating and applying, HTML 424 
page validation with XHTML, HTML F1-F13 
files on web, HTML F10-F12 
frameset DTD, HTML F5-F6 
inserting DOCTYPE declaration, HTML F8-F9 
setting the XHTML namespace, HTML F9-F10 
strict DTD, HTML F5-F7 
transitional DTD, HTML F5-F6 
valid use of attributes, HTML F7-F8 
well-formed documents, HTML F2-F4 
page-break-after property, HTML 431 
page-break-before property, HTML 418, 
HTML 431-432 
page-break-inside property, HTML 418 
paragraphs, grouping content by, HTML 28 
parallel arrays, HTML 788 
<param> tag, HTML B16 
parameters, HTML 730 
parent elements, HTML 110 
pattern attribute, HTML 562 
percent sign (%), JavaScript operators, HTML 720 
Perl, HTML 522 
perspective, HTML 333-336 
setting in 3D, HTML 334 
perspective function, HTML 333-336 
perspective property, HTML 326, HTML 333, 
HTML 334 
phone numbers, linking to, HTML 67-68 
pipe (|), logical operators, HTML 777, HTML 787 
pixels, HTML 124 
device and CSS, HTML 375 
placeholder(s), HTML 540-542 
placeholder attribute, HTML 518, HTML 540, 
HTML 558 
plug-ins, HTML 605-606 
attributes, HTML 615-616 
as fallback options, HTML 616 
Section 508 guidelines, HTML D10-D11 
plus sign (+), JavaScript operators, HTML 720 
PNG (Portable Network Graphics), HTML 280 
pop() method, HTML 767, HTML 768 
position, list markers, HTML 141, HTML 142-143 
position attribute, HTML 618 
positioning, setting background image position, 
HTML 283-284 
positioning styles, HTML 239 
absolute positioning, HTML 241-244 
clipping elements, HTML 257-258 
CSS, HTML 240 
fixed positioning, HTML 244 
inherited positioning, HTML 244 
overflow, HTML 254-256 
relative positioning, HTML 240-241 
stacking elements, HTML 258-260 
static positioning, HTML 240 
using, HTML 244-254 
post method, HTML 523 
poster attribute, HTML 618 
pound symbol (#), character encoding references, 
HTML 35 
<pre> tag, HTML 27, HTML B16 
precedence, styles, HTML 94 
presentational attributes, HTML 36 
presentational elements, HTML 36 
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print style(s), HTML 418-436 
formatting hyperlinks for printing, HTML 428-430 
media queries for printed output, HTML 421-422 
page breaks, HTML 431-435 
page names, HTML 423-424 
page property, HTML 423-427 
page pseudo-classes, HTML 423 
page rule, HTML 422-430 
previewing the print version, HTML 420-421 
setting page size, HTML 423 
printing 
attributes, HTML C16-C17 
effective, HTML 436 
program loops, HTML 770-785. See also specific loops 
arrays, HTML 777-784 
command blocks, HTML 773 
comparison operators, HTML 776 
creating, HTML 777 
efficient, HTML 784 
logical operators, HTML 776-777 
<progress> tag, HTML B16 
progressive enhancement, HTML 106 
prologs, HTML F2 
properties, HTML 700 
protanopia, HTML D4, HTML D5 
protected structures, HTML E5-E6 
protocols, HTML 64 


pseudo-classes, HTML 149-151, HTML B3. See also spe- 


cific pseudo-class names 
applying to hypertext links, HTML 153-154 
applying to unordered lists, HTML 150 
dynamic, HTML 152-154 
page rule, HTML 423 
structural, HTML 149 
pseudo-elements, HTML 154-155, HTML B2 
pull-down menus, HTML D11 
creating with CSS, HTML 376-379 
push buttons, HTML D11 
push() method, HTML 767, HTML 768 


Q 

<q> tag, HTML 29, HTML 30, HTML B16 
queries. See media queries 

queues, HTML 766 

quirks mode, HTML 9 

quotation marks, HTML 157-158 
quotes, block, HTML 39-41 

quotes property, HTML 136 


R 

radial gradient(s), HTML 316-319, HTML 321 
radial-gradient property, HTML 302, HTML 317-319, 
HTML 321 

radio buttons, HTML 520, HTML 553-555 

radio data type, HTML 544 

random numbers, generating, HTML 729 

random shuffle, arrays, HTML 765 

range data type, HTML 562 

range slider controls, HTML 563, HTML 566-569 
readability, font size, HTML 133 

read-only properties, HTML 704 

reduce () method, HTML 783 

reduceRight () method, HTML 783 

reflections, HTML 311 

regular expressions (regex), HTML 578 
Rehabilitation Act, HTML D2. See also Section 508 
relative paths, HTML 61-62 


relative positioning, HTML 238, HTML 240-241 
relative units, font size, HTML 123-124, HTML 133 
rem unit, HTML 124-125 
reordering content using flexboxes, HTML 407-408 
repeating gradients, HTML 320-321 
required attribute, HTML 562 
required pseudo-class, HTML 582 
reset buttons, HTML 563, HTML 572-575 
reset data type, HTML 562 
reset style sheets, HTML 178-182 
responsive design, HTML 183, HTML 364-365 
reverse () method, HTML 767, HTML 768 
reversing arrays, HTML 763-764 
RGB color values, HTML 86, HTML 99-101 
RGB triplets, HTML 100 
rhythm, HTML 259 
right angle bracket (>) comparison operators, HTML 776 
right pseudo-class, HTML C3 
rollover effect, HTML 59 
root elements, HTML F3 
root em unit, HTML 124-125 
root folder, HTML 60 
root pseudo-class, HTML 149, HTML C3 
rotate function, HTML 328 
rotate3d function, HTML 333 
rotatex function, HTML 326, HTML 333 
rotateY function, HTML 326, HTML 333 
rotateZ function, HTML 326, HTML 333 
rounded corners, borders, HTML 293-296 
row(s) 
banded, creating, HTML 485 
cells spanning, HTML 464, HTML 466-468 
row groups, HTML 478-481 
formatting, HTML 480-481 
row height, setting, HTML 487-488 
rowspan attribute, HTML 452, HTML 464, 
HTML 466-468 
<rp> tag, HTML B16 
<rt> tag, HTML B16 
ruby tag, HTML B16 
rules, columns, HTML 500 
run-time errors, HTML 692 


Ss 
<s> tag, HTML 29, HTML B16 
<samp> tag, HTML 29, HTML B16 
sans-serif fonts, HTML 117, HTML 133 
saturate function, HTML 326, HTML 338 
saturation, HTML 101 
scalable text, HTML 124-125 
Scalable Vector Graphics. See SVG (Scalable Vector Graphics) 
scale function, HTML 326, HTML 328 
scale3d function, HTML 333 
scalex function, HTML 328, HTML 333 
scaley function, HTML 328, HTML 333 
scaleZ function, HTML 333 
scope, HTML 733 
scope attribute, HTML D8-D9 
screen readers, HTML D1 
script(s), HTML 39 
inserting in forms, HTML 525 
Section 508 guidelines, HTML D10-D11 
script element, HTML 686-689 
inserting, HTML 686-688 
loading, HTML 686-687 
using with other programming languages, HTML 689 
<script> tag, HTML 15, HTML B16 


scrolling text, Section 508 guidelines, HTML D10 
Section 508, HTML D2-D13 
animation, HTML D10 
applets, HTML D10-D11 
color, HTML D4-Dé 
frame sites, HTML D10 
graphics, HTML D2-D4 
image maps, HTML D6-D7 
images, HTML D2-D4 
links, HTML D12 
multimedia, HTML D4 
plug-ins, HTML D10-D11 
scripts, HTML D10-D11 
scrolling text, HTML D10 
style sheets, HTML Dé 
tables, HTML D7-D9 
text-only equivalents, HTML D13 
timed responses, HTML D12 
web forms, HTML D11-D12 
<section> tag, HTML 24, HTML B16 
sectioning elements, HTML 24-26 
select element, HTML 544 
<select> tag, HTML B16-B17 
selected attribute, HTML 544 
selection lists, HTML 520, HTML 547-552 
attributes, HTML 549-551 
creating, HTML 547-552 
grouping selection options, HTML 551-552 
selection pseudo-element, HTML C2 
selector, HTML 86 
selector patterns, HTML 110-117 
attribute selectors, HTML 113-116 
calculating selector specificity, HTML 117 
contextual selectors, HTML 110-112 
semantic elements, HTML 24 
semi-opaque colors, defining, HTML 102 
semi-transparent objects, HTML 322-323 
sepia function, HTML 326, HTML 338 
serif fonts, HTML 117, HTML 133 
server(s), HTML 4 
server-based programs, forms, HTML 521-522 
server-side image maps, HTML 341 
server-side programming, HTML 684-685 
server-side validation, HTML 575 
set FullYear() method, HTML 718 
setInterval() method, HTML 718 
shift () method, HTML 768 
shrink rate, flexboxes, defining, HTML 399-401 
sibling selectors, HTML 111 
site indexes, HTML E4 
size 
attributes, HTML C12-C14 
scrolling, Section 508 guidelines, HTML D10 
size attribute, HTML 544 
sizing 
background images, HTML 285 
flex items, HTML 401 
skew function, HTML 328, HTML 329 
skewx function, HTML 328 
skewY function, HTML 328 
slice() method, HTML 767, HTML 768 
slider controls, HTML 520, HTML 566 
<small> tag, HTML 29, HTML B17 
sms scheme, HTML 64 
some () method, HTML 783 
sort () method, HTML 767, HTML 768 
sorting arrays, HTML 764-765 


source element, HTML 602 
<source> tag, HTML B17 
spacing, text, HTML 127-129 
spaghetti code, HTML 808 
spam, HTML 67 
<span> tag, HTML 29, HTML B17 
sparse arrays, HTML 761 
special effects, attributes, HTML C17-C18 
specific fonts, HTML 117 
specificity 

selectors, calculating, HTML 117 

styles, HTML 94 
spin boxes, HTML 520 
spinner controls, HTML 563, HTML 564 
splice () method, HTML 767, HTML 768 
sprites, HTML 658 
square brackets ((]), arrays, HTML 758 
stacking elements, HTML 258-260 
stack(s), arrays used as, HTML 766-768 
standards mode, HTML 9 
start expression, HTML 770 
starting tags, HTML 9 
statement labels, HTML 807 
static positioning, HTML 240 
step attribute, HTML 562 
storyboards, HTML E1 
strict DTDs, HTML F5-F7 
strict mode, HTML 695-696 
<strong> tag, HTML 22, HTML 29, HTML 30, HTML B17 
strongly typed languages, HTML 711 
structural pseudo-classes, HTML 149 
style(s), HTML 86 

applying to media player, HTML 610-613 

applying to track cues, HTML 630-634 

background. See background images 

browser, HTML 89 

defining, HTML 96 

embedded, HTML 89 

external, HTML 89 

flexible form layouts, HTML 535-536 

fonts. See font styles 

inline, HTML 89 

page, creating and applying, HTML 424 

positioning. See positioning styles 

print. See print style(s) 

specificity and precedence, HTML 84 

tables. See table styles 

user agent, HTML 89 

user-defined, HTML 89 

viewing pages, HTML 89-91 

widgets, HTML 569 
style attribute, HTML 11 
style comments, HTML 86, HTML 96-97 
style inheritance, HTML 94 
style rules, HTML 86, HTML 92-96 

browser developer tools, HTML 95-96 

browser extensions, HTML 92-93 

creating with contextual selectors, HTML 112 

embedded style sheets, HTML 93 

inline styles, HTML 93-94 

style inheritance, HTML 94 

style specificity and precedence, HTML 94 
style sheets, HTML 88-91 

creating, HTML 96-98 

embedded, HTML 93 

@font-face rule, HTML 120-122 
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importing, HTML 98 
linking HTML documents, HTML 32-33 
managing, HTML 160 
reset, HTML 178-182 
Section 508 guidelines, HTML Dé 
viewing pages, HTML 89-91 
<style> tag, HTML 15, HTML B17 
<sub> tag, HTML 29, HTML B17 
subarrays, HTML 765 
submit buttons, HTML 563, HTML 572-575 
submit data type, HTML 562 
summary attribute, HTML D9 
<summary> tag, HTML B17 
<sup> tag, HTML 29, HTML B17 
SVG (Scalable Vector Graphics), HTML 280 
switch statement, HTML 796 
symmetric transitions, HTML 652 
symmetrical balance, HTML 259 
syntax, HTML 5 
JavaScript, HTML 691-692 


7 
tab indexing, HTML 557 
tabindex attribute, HTML 11, HTML 557 
table(s) 
attributes, HTML C18 
narrow, creating, HTML 487 
Section 508 guidelines, HTML D7-D9 
table element, HTML 452, HTML 454-456 
table styles, HTML 485-492 
applying to other elements, HTML 490-491 
width and height, HTML 486-490 
<table> tag, HTML B17-B18 
tablet designs, HTML 383-386 
target attribute, HTML 69 
target pseudo-class, HTML C3 
tbody element, HTML 476, HTML 478 
<tbody> tag, HTML B18 
td element, HTML 452 
<td> tag, HTML B18 
tel scheme, HTML 46, HTML 64 
ternary operators, HTML 791 
testing mobile websites, HTML 379-383 
tetrad color scheme, HTML 106 
text. See also CSS typography; font(s); font styles; 
selector patterns 
aligning horizontally and vertically, HTML 131-133 
quotation marks, HTML 158 
scalable, HTML 124 
scrolling, Section 508 guidelines, HTML 128-129 
setting color, HTML 102-105 
spacing HTML 128 
text area boxes, HTML 520, HTML 558-560, HTML D11 
text editors, HTML 6-7 
text shadows, HTML 304-306 
text strings, HTML 710 
text tracks, HTML 624-634 
applying styles, HTML 630-634 
placing cue text, HTML 628-630 
WebVTT, HTML 625-628 
text-align property, HTML 108 
textarea element, HTML 544 
<textarea> tag, HTML B18-B19 
textContent property, HTML 698 
text-level elements, HTML 29-31 
text-only equivalents, accessibility, HTML D13 


text-shadow property, HTML 302, HTML 304-306 
tfoot element, HTML 476, HTML 478 
<tfoot> tag, HTML B19 
th element, HTML 452 
<th> tag, HTML B19 
thead element, HTML 476, HTML 478, HTML 479 
<thead> tag, HTML B20 
Theora codec, HTML 620 
3D transformations, HTML 332-333 
applying, HTML 335-336 
tiling, HTML 281-283 
time(s), writing for global marketplace, HTML 715 
<time> tag, HTML 29, HTML 55, HTML B20 
timed responses, Section 508 guidelines, HTML D12 
time-delayed commands, HTML 734 
time-stamping, HTML 55 
timing, transitions, setting, HTML 644-647 
title, setting, HTML 16 
title attribute, HTML 11, HTML D10 
Title cue text, HTML 619 
<title> tag, HTML 2, HTML 15, HTML 17, HTML B20 
toLocalDateString() method, HTML 698 
toLocalTimeString() method, HTML 698 
top property, HTML 238 
toString () method, HTML 768 
touch devices, hover event, HTML 154 
tr element, HTML 452, HTML 454-456 
<tr> tag, HTML B20 
track cues, HTML 618 
track element, HTML 618, HTML 624 
<track> tag, HTML B20 
tracking, HTML 127 
tracks, HTML 211 
transform property, HTML 326 
transformations, HTML 328-337 
applying, HTML 329, HTML 331-332 
3D, HTML 332-333 
transition(s), HTML 641-652 
delaying, HTML 647 
hover, HTML 647-652 
properties affected, HTML 644 
setting timing, HTML 644-647 
symmetric and asymmetric, HTML 652 
transition property, HTML 642 
transition style, HTML 640, HTML 642, HTML 644 
transitional DTDs, HTML F5-F6 
translate function, HTML 328, HTML 329 
translate3d function, HTML 333 
translateX function, HTML 328, HTML 333 
translateY function, HTML 326, HTML 328, HTML 333 
translatez function, HTML 333 
transparency, gradients, HTML 314 
triad color scheme, HTML 106 
tritanopia, HTML D4, HTML D5 
<tt> tag, HTML B20 
type attribute, HTML 528-531, HTML 602 
typography. See also CSS typography; font size; selector 
patterns 
definition, HTML 117 


U 

<u> tag, HTML 29, HTML B20 

<ul> tag, HTML 27, HTML 46, HTML 49, HTML 50, 
HTML B20 

unary operators, HTML 720 

Unicode, HTML 33 
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units 
font size, HTML 123-125, HTML 133 
of measure, CSS, HTML C5-Cé 
unity, HTML 259 
Universal Resource Locators (URLs), HTML 57-68 
unordered lists, HTML 49 
applying pseudo-classes, HTML 150 
unshift() method, HTML 768 
unstacking, HTML 766 
update expression, HTML 770 
url function, HTML 338 
URL(s). See Universal Resource Locators (URLs) 
use strict statement, HTML 683 
user agent styles, HTML 89 
user-defined styles, HTML 89 
UTF-8, HTML 17 


V 
valid documents, HTML F4-F9 
frameset DTD, HTML F5-F6 
inserting DOCTYPE declaration, HTML F8-F9 
strict DTD, HTML F5-F7 
transitional DTD, HTML F5-F6 
valid use of attributes, HTML F7-F8 
valid pseudo-class, HTML 583-585 
validation 
client-side, HTML 575 
data. See data validation; numeric data validation 
field values, HTML 579 
inline. See inline validation 
server-side, HTML 575 
web forms. See web form validation 
validators, HTML 7 
value attribute, HTML 518, HTML 539, HTML 556, 
HTML 564 
vanishing point, HTML 333 
var keyword, HTML 698 
<var> tag, HTML 29, HTML B20 
variables, HTML 709-711 
data types, HTML 710 
declaring, HTML 709 
using, HTML 711 
vector images, HTML 280 
vendor prefixes, HTML 92 
vertical centering, HTML 188-189 
vertical-align property, HTML 488 
video element, HTML 607, HTML 618 
HTML 5, HTML 621-624 
video formats, browser support, HTML 621 
video players, third-party, HTML 634-637 
<video> tag, HTML 36, HTML B20 
VideoJS, HTML 637 
viewing. See also displaying 
HTML files in browsers, HTML 12-13 
pages using different style sheets, HTML 89-91 
viewport(s), HTML 372-375 
viewport meta tag, HTML 362 
viewport units, HTML 125 
virtual keyboards, HTML 531-532 
visited pseudo-class, HTML 136, HTML 152, HTML C3 
visual disability, HTML D1 
visual effects, effective use, HTML 324 
visual viewports, HTML 372, HTML 373-374 
VP8 codec, HTML 620 
VP9 codec, HTML 620 


WwW 
WAI. See Web Accessibility Initiative (WAI) 
WANs. See wide area networks (WANs) 


watermarks, HTML 283 
WAV format, HTML 608 
<wbr> tag, HTML 29, HTML 38-39, HTML B21 
weakly typed languages, HTML 711 
Web Accessibility Initiative (WAI), HTML D13-D16 
web audio, HTML 603-616 
applying styles to media player, HTML 610-613 
audio element, HTML 607-615 
browsers and audio formats, HTML 607-610 
codecs, HTML 604 
containers, HTML 604 
effective, HTML 615 
embedded objects, HTML 615-616 
fallback to audio clips, HTML 613-614 
plug-in attributes, HTML 615-616 
plug-ins, HTML 605-606 
plug-ins as fallback options, HTML 616 
web browsers, HTML 4-5. See also entries beginning 
with term browser 
attributes, HTML C9-C10 
audio format support, HTML 607-610 
aural, attributes, HTML C6-C7 
automatic page breaks, HTML 432 
cross-browser compatible forms, HTML 542 
legacy, graphic design, HTML 300 
legacy, supporting HTML, HTML 39 
video format support, HTML 621 
viewing HTML files, HTML 12-13 
web fonts, HTML 119-122 
web form(s), HTML 517-591 
cross-browser compatible, HTML 542 
default values, HTML 539-542 
effective, creating, HTML 560 
field labels, HTML 532-533 
field sets. See field sets 
input boxes. See input boxes 
interacting with web server, HTML 521, HTML 
523-525 
layout, designing, HTML 534-539 
parts, HTML 520-521 
placeholders, HTML 539-542 
scripts, inserting, HTML 525 
Section 508 guidelines, HTML D11-D12 
server-based programs, HTML 521-522 
starting, HTML 522-525 
structure of, HTML 519 
widgets. See widgets 
web form validation, HTML 575-580 
based on data type, HTML 577-578 
defining field value length, HTML 580 
identifying required values, HTML 575-577 
testing for valid patterns, HTML 578-580 
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(WHATWG), HTML 5 
web pages, HTML 4-5 
accessibility, HTML 44 
web resources, linking to, HTML 65 
web safe fonts, HTML 118 
web servers, HTML 4-5 
interacting with, HTML 521, HTML 523-525 
server-based programs, HTML 521-522 
web tables, HTML 452-474 
accessibility, HTML 474 
adding borders with CSS, HTML 459-464 
cell types, HTML 456 
creating captions, HTML 471-473 
effective, designing, HTML 495 


marking table headings and table data, HTML 456-459 


marking tables and table rows, HTML 454-456 
mobile devices, HTML 492-495 
spanning rows and columns, HTML 464-470 
web video, HTML 619-638 
animations. See animation(s) 
codecs, HTML 620-621 
effective, HTML 638 
text tracks. See text tracks 
third-party video players, HTML 634-637 
transitions. See transition(s) 
video element, HTML 621-624 
video formats, HTML 620-621 
Web Video Text Tracks (WebVTT), HTML 618, 
HTML 625-628 
cue attributes, HTML 629 
WebM format, HTML 608, HTML 618, HTML 620 
websites 
managing, HTML 62 
with no coherent structure, HTML E5 
speeding up by minifying and compressing, 
HTML 416 
structure, HTML E1-E6 
WebVTT. See Web Video Text Tracks (WebVTT) 
well-formed documents, HTML F2-F4 
while loop, HTML 774-775 
white space, HTML 257 
white-space characters, HTML 12 
wide area networks (WANs), HTML 4 
widgets, HTML 520, HTML 545-561 
check boxes, HTML 556-557 
entering time and date values, HTML 546-547 
option buttons, HTML 553-555 
selection lists. See selection lists 
styles, HTML 569 
text area boxes, HTML 558-560 
widows, HTML 434-435 
widows property, HTML 418, HTML 434-435, HTML 501, 
HTML 503 
width 
borders, HTML 290-291 
elements, maximum and minimum dimensions, 
HTML 184-186 
table columns, setting, HTML 486, HTML 489 
width property, HTML 176, HTML 486 
wildcard selector (*), HTML 111 
window. alert command, HTML 683 
Wistia, HTML 637 
World Wide Web, HTML 4-5. See also mobile web 
World Wide Web Consortium (W3C), HTML 5 
Wufoo, HTML 585 


x 
XHTML (Extensible HyperText Markup Language), 
HTML 5 
page validation. See page validation with XHTML 
XML. See Extensible Markup Language (XML) 
XML parsers, HTML F2 
<xml> tag, HTML B21 
XML vocabularies, HTML F1 
<xmp> tag, HTML B21 


Y 
YouTube, embedding videos from, HTML 636-637 


Z 
z-index property, HTML 258-259 


